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内 容 简 介 


本 书 介绍 了 一 种 思 新 的 Android 开发 模式 ,将 繁琐 的 代码 开发 变 为 轻松 的 拼图 游戏 ,不 仅 可 以 简化 
开发 过 程 、 降 低 开发 难度 ,还 可 以 提高 开发 效率 ,让 开发 者 在 Android 应 用 程序 开发 过 程 中 充满 乐趣 。 

本 书 分 为 8 章 , 涉 及 的 内 容 包括 App Inventor 的 开发 环境 搭建 、 用 户 界面 开发 .数据 存储 与 访问 、 动 
画 与 游戏 .地 图 应 用 开发 等 方面 , 较 全 面 地 覆盖 了 Android 程序 开发 所 涉及 的 内 容 。 

本 书 内 容 丰 富 , 实 用 性 强 , 既 可 用 作 高 等 院 校 信息 技术 的 教材 ,也 可 供 相 关 专业 人 士 参考 。 
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Android 是 当今 应 用 最 为 广泛 的 智能 手机 平台 ,具有 丰富 的 软 
件 资 源 。Android 软件 开发 具有 一 定 的 难度 ,一 般 需 要 开发 者 具备 
一 定 的 软件 开发 知识 和 经 验 ,App Inventor 的 出 现 ,将 非 程 序 人 员 
编写 Android 应 用 软件 的 愿望 变 成 了 现实 。App Inventor 创造 的 
拼图 开发 方式 ,简化 了 复杂 的 程序 编码 过 程 , 极 大 地 提升 了 学 习 者 
对 软件 编程 的 兴趣 ,并 为 初学 者 创造 了 一 个 轻松 的 开始 。 

书 中 所 涉及 的 内 容 包括 App Inventor 的 开发 环境 搭建 ,用户 界 
面 开 发 、 数 据 存储 与 访问 、 动 画 与 游戏 .地 图 应 用 开发 等 方面 , 较 全 
面 地 覆盖 了 Android 程序 开发 所 涉及 的 内 容 。 

全 书 共 分 8 章 : 

第 1 章 介 绍 App Inventor 的 起 源 、 优 势 与 不 足 , 展 示 出 App 
Inventor 开发 的 一 些 作 品 ,并 对 互联 网 上 的 App Inventor 学 习 资 源 
进行 简单 的 介绍 。 

第 2 章 详细 说 明 App Inventor 开发 环境 的 安装 和 账号 注册 方 
法 ,并 简单 地 介绍 如 何 使 用 模拟 器 和 手机 进行 调试 。 

第 3 章 介绍 开发 App Inventor 应 用 程序 的 基础 知识 和 基本 方 
法 ,说 明 App Inventor 的 界面 编辑 器 和 模块 编辑 器 的 作用 和 使 用 
x. 

第 4 章 详细 介绍 App Inventor 程序 开发 的 基础 内 容 , 包 括 条 件 
判断 、 循 环 、 列 表 和 函数 ,并 简单 说 明 如 何 区 分 模块 的 事件 、 属 性 和 
XE. 

第 5 X 4- App Inventor 界面 设计 和 开发 的 方法 ,重点 介绍 常 
见 的 基础 控件 、 媒 体 控件 和 社交 控件 ,并 对 屏幕 的 布局 方式 进行 
讲解 。 

第 6 章 介 绍 使 用 App Inventor 开发 游戏 与 动画 的 方法 ,详细 讲 
解 画布 .精灵 和 球体 的 控件 使 用 ,并 介绍 碰撞 检测 的 原理 。 

第 7 章 介绍 App Inventor 数据 存储 机 制 , 主 要 讲解 TinyDB 控 
件 的 存储 、 读 取 、 更 新 和 删除 数据 的 方法 。 

第 8 章 介 绍 App Inventor 进行 地 图 应 用 开发 的 方法 ,讲解 如 何 
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使 用 位 置 传感器 和 谷歌 地 图 的 方法 ,并 简单 介绍 通知 控件 。 

本 书 由 哈尔滨 工程 大 学 王 向 辉 、 张 国 印 、. 谢 晓 芹 负责 主要 编写 工作 ,参与 本 书 编写 和 
校 核 工 作 的 还 有 和 孙 字 形 、 杨 月 . 宁 凡 强 、 张 盒 或 、 何 志 昌 和 李晓光 ,这 里 对 他 们 的 辛苦 工 作 
ACORN ORE S 

同时 感谢 谷歌 (中 国 ) 的 朱 爱 民 先 生 、 东 北大 学 的 李 丹 程 和 刘 莹 老师 ,感谢 他 们 对 
Android 教学 和 科研 工作 的 帮助 ,以 及 对 哈尔滨 工程 大 学 Android 人 才 培 养 基地 的 支持 。 

App Inventor 是 一 个 新 兴 的 开发 模式 ,很 多 方面 还 在 不 断 地 完善 和 变化 。 由 于 能 
力 和 水 平 所 限 ,虽然 竭尽 全 力 ,但 书 中 仍然 难免 存在 不 足 和 玖 漏 的 地 方 ,希望 各 位 专 
家 、 教 师 和 同学 能 毫 不 保留 地 提出 所 发 现 的 问题 ,与 编者 共同 讨论 ,编者 的 邮箱 为 
wangxianghui(? live. cn, 

App Inventor 屏蔽 了 Android 程序 开发 中 复杂 的 编程 细节 ,因此 可 供 没 有 程序 基础 
的 低 年 级 学 生 和 非 计算 机 专业 学 生 学 习 , 可 以 在 大 学 一 年 级 和 二 年 级 开设 这 门 课程 。 

所 有 示例 代码 和 教学 资源 (教学 大 岗 、 教 学 PPT、 习 题 答案 等 ) 均 可 在 清华 大 学 出 版 
社 (http://www. tup. tsinghua. edu. cn) 或 哈尔滨 工程 大 学 的 网 站 (http://android. 
hrbeu. ed. cn) 上 下 载 。 
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Android 5j App Inventor 


App Inventor Z — AA + Fl Z& , * 46, 8,85. Android 程序 开发 环境 , 它 将 枯燥 的 代码 变 成 
一 块 一 块 的 拼图 ,使 Android 软件 开发 变 得 简单 有 趣 , 使 不 懂 编 程 的 用 户 也 可 以 开发 出 属于 
自己 的 Android 应 用 程序 。 通 过 本 章 的 学 习 , 读 者 将 了 解 Android 系统 的 特点 和 发 展 趋势 ， 
掌握 App Inventor 的 起 源 、 优 势 和 不 足 , 了 解 互联 网 上 的 一 些 App Inventor 学 习 资 源 。 

本 章 学 习 目标 : 

* 了 解 Android 系统 的 起 源 和 发 展 趋势 ; 
。 掌握 App Inventor 的 优势 和 不 足 ; 
* Yf App Inventor 学 习 资 源 。 
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Android 是 Google 发 布 的 基于 Linux 平台 的 开源 手机 操作 系统 。Android 一 词 的 
本 义 是 “机 器 人 ”, 国 内 多 称 为 “ 安 卓 ?或 “ 安 致 ”。Android 最 初 应 用 在 智能 手机 和 平板 电 
脑 上 ,是 第 一 个 完整 .开放 .免费 的 手机 操作 系统 。Android 界面 如 图 1.1 所 示 。 


图 1.1 Android 界面 
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Android H jll + 22 3E ( Andy Rubin) 创 建 于 2003 年 ,于 2005 年 被 Google 收购 。 
2007 年 11 月 5 日 ,Google 公 司 正式 向 外 界 展 示 了 这 款 名 为 Android 的 操作 系统 。 

Android 是 当今 世界 上 应 用 最 广泛 的 智能 手机 平台 。 截 止 到 2012 年 10 月 ,Android 
的 应 用 软件 已 有 约 70 万 个 ,在 Google Play 的 软件 下 载 量 达到 了 250 亿 次 。2012 年 9 月 
的 统计 数据 表明 ,每 天 的 Android 设备 激活 数量 已 经 超过 了 130 万 台 , 总 激活 的 设备 量 
超过 4.8 亿 。Android 在 全 球 智能 手机 操作 系统 市 场所 占 的 份额 为 76% ,在 中 国 市 场 的 
占有 率 高 达 90%。 

Android 应 用 得 如 此 广泛 ,与 其 自身 的 特点 是 分 不 开 的 。 首 先 ,Android 是 一 款 开源 的 
手机 操作 系统 ,有 效 地 缩短 了 开发 周期 ,降低 了 开发 成 本 。 用 户 可 以 免费 下 载 Android 源 代 
码 , 并 在 原 系 统 的 基础 上 进行 二 次 开发 ,创造 具有 个 性 化 的 Android 系统 。Android 为 各 种 
应 用 程序 提供 平等 的 性 能 支持 ,能 够 满足 用 户 对 不 同 应 用 的 需求 ,用 户 可 以 下 载 自己 喜欢 
的 软件 到 手机 上 ,也 可 更 改 手机 的 界面 或 图 片 的 浏览 方式 ,使 自己 的 手机 与 众 不 同 。 借 助 
谷歌 在 互联 网 运营 方面 的 优势 ,谷歌 地 图 .邮件 和 搜索 等 服务 直接 内 置 在 Android 系统 中 ， 
作为 用 户 与 互联 网 之 间 的 重要 纽带 ,增强 了 手机 的 实用 功能 。 

Android 系统 最 初 只 是 为 智能 手机 所 设计 ,但 随 着 应 用 领域 的 不 断 拓 展 ,Android 系 

统 被 广泛 应 用 在 平板 电脑 .电视 .手表 、 眼 镜 、 冰 箱 、 耳 机 
和 跑步 机 等 设备 中 ,使 人 们 的 生活 变 得 越 来 越 智能 化 。 
“谷歌 眼镜 ?是 谷歌 公司 在 2012 年 4 月 发 布 的 一 款 
“扩展 现实 ”眼镜 产品 ,如 图 1.2 所 示 , 可 以 语音 拍照 . 视 
频 通话 和 辨 明 方向 ,也 可 以 访问 互联 网 信息 .处 理 文字 
信息 和 电子 邮件 。 眼 镜 的 右 眼 镜片 上 安装 了 一 个 微型 
投影 仪 和 一 个 摄像 头 ,投影 仪 用 以 显示 数据 ,摄像 头 用 来 拍摄 视频 和 照片 ,再 通过 传感器 
进行 存储 和 传输 ,而 操控 模式 可 以 是 语言 或 触 控 。 

基于 Android 系统 的 im Watch 智能 手表 ,可 以 显示 时 间 和 天 气 预报 ,还 可 以 显示 短 
信息 和 联系 人 等 ,并 可 与 其 他 Android 系统 手机 连接 ,如 图 1.3 所 示 

联想 智能 电视 尺寸 达到 了 55 英寸 ,运行 最 新 的 Android 4.0 Ice Cream Sandwich 系 
统 ,内 置 500 万 像素 摄像 头 ,支持 SD 卡 插 槽 ,如 图 1.4 Bron. 


1.2 谷歌 眼镜 


图 1.3 im Watch 智能 手表 图 1.4 联想 K91 智能 电视 
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ZĘ Android 冰箱 是 一 台 有 着 内 置 应 用 软件 的 冰箱 ,功能 包括 显示 照片 .播放 音乐 
和 给 家 人 留 便条 等 ,三 星 Android 冰箱 还 有 一 个 专门 用 来 除 霜 以 及 改变 温度 的 应 用 软 
件 ,如 图 1.5 所 示 。 

Admiral Touch 耳机 同样 是 基于 Android 系统 ,配备 了 一 块 2.4 英寸 的 彩色 触摸 屏 ， 
用 户 可 以 用 它 玩 游戏 和 看 电影 ,这 款 耳 机 支持 2. 4G 和 蓝牙 通信 ,具备 7.1 虚拟 环绕 音 
效 , 如 图 1.6 所 示 。 


1.5 三 星 Android 冰箱 1.6 Admiral Touch 耳机 
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Android App Inventor 曾 是 谷歌 实验 室 的 一 个 子 计划 ,于 2010 4E 7 月 推出 ,是 一 款 
所 见 即 所 得 的 Android 应 用 创建 器 , 它 允 许 没 有 编程 知识 的 用 户 , 通 过 拖 蝶 特 定 的 应 用 
程序 行为 模块 来 创建 Android 应 用 。2011 年 8 月 ,谷歌 公司 将 该 项 目的 源 代码 对 外 开 
放 , 并 于 2012 年 1 月 将 该 项 目 移交 给 麻 省 理工 学 院 移动 学 习 中 心 (The MIT Center for 
Mobile Learning) ,由 麻 省 理工 学 院 的 Hal Abelson 教授 领导 开发 ,并 与 2012 年 3 月 向 互 
联网 用 户 开 放 使 用 ,更 名 为 MIT App Inventor, 如 图 1.7 所 示 。 


1.7 MIT App Inventor 
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App Inventor 的 研发 目标 是 “使 人 们 在 移动 通信 的 世界 里 成 为 创造 者 ,而 不 仅 是 消 
Tt", App Inventor 创造 的 拼图 开发 方式 ,简化 了 复杂 的 程序 编码 过 程 , 极 大 地 提升 了 
学 习 者 对 软件 编程 的 兴趣 ,并 为 初学 者 创造 了 一 个 轻松 的 开始 。 

App Inventor 的 模块 编辑 语言 是 基于 Open Blocks 项 目的 研究 成 果 创 建 的 ,而 Open 
Blocks 项 目 与 StarLogo TNG.Scratch 这 两 个 项 目 联系 紧密 。 对 App Inventor 模块 编辑 
器 的 界面 构想 ,在 很 多 方面 借鉴 了 StarLogo TNG 和 Scratch 的 研究 成 果 , 下 面 分 别 对 这 
两 个 项 目 进行 介绍 。 

StarLogo TNG(The Next Generation) 是 一 种 基于 主体 的 仿真 语言 ,由 麻 省 理工 媒 
体 实 验 室 和 教师 教学 计划 共同 研发 ,其 设计 主要 目的 是 针对 计算 机 教育 ,可 以 用 来 模拟 
分 散 式 控制 系统 的 行为 ,如 图 1. 8 所 示 。StarLogo TNG 能 够 利用 开放 式 图 形 库 提供 
3D 视野 ,并 运用 模块 图 形 语 言 来 增强 易 用 性 和 易学 性 。 


1.8 StarLogo TNG 


Scratch 是 麻 省 理工 媒体 实验 室 开发 的 一 款 面向 儿童 的 简易 编程 工具 , 旨 在 通过 游 
戏 式 的 方式 激发 深层 次 的 学 习 , 如 图 1.9 所 示 。 用 户 可 以 利用 Scratch 创建 互动 动画 、 故 
事 或 游戏 ,并 可 通过 网 络 与 其 他 开发 者 分 享 自己 的 创造 成 果 。Scratch 的 学 习 可 以 为 日 
后 学 习 更 高 级 别 的 编程 语言 葛 定 坚实 的 知识 基础 。MIT 的 Scratch 团队 重视 软件 的 易学 
性 ,创建 和 调试 Scratch 程序 都 非常 简易 。 最 早 的 Scratch 版 本 于 2006 年 由 “终生 幼儿 园 
团队 ”(Lifelong Kindergarten Group) 发 布 。 

StarLogo TNG 和 Scratch 在 很 多 方面 对 App Inventor 产生 了 重要 的 影响 ,比如 都 
采用 拖 虹 的 编辑 方式 .模块 化 的 编辑 语言 , 且 App Inventor 和 Scratch 一 样 ,都 致力 于 为 
初学 者 创造 更 愉快 和 简易 的 编程 体验 。 

两 者 的 不 同 之 处 在 于 ,App Inventor 是 一 款 用 来 开发 智能 手机 程序 的 工具 。 因 为 智 
能 手机 在 当今 年 轻 群 体 中 的 流行 和 普及 ,App Inventor 拥有 极 大 的 潜力 来 吸引 越 来 越 多 
的 年 轻 人 从 事 软 件 开发 工作 ,并 运用 计算 思维 分 析 和 解决 问题 。 


1.9 Scratch 
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目前 比较 流行 的 Android 开发 方式 是 使 用 Eclipse 编写 Java 代码 ,Eclipse 集成 开发 
环境 如 图 1.10 所 示 。 使 用 代码 进行 程序 开发 是 目前 较为 成 熟 且 普遍 的 方法 ,这 种 开发 
方式 对 开发 人 员 的 开发 知识 和 经 验 具 有 一 定 的 要 求 , 对 于 刚刚 接触 程序 开发 或 者 没有 程 
序 开 发 经 历 的 用 户 来 说 ,使 用 代码 开发 是 一 件 较为 困难 的 事情 。 


Project Refactor Window Help = 一 一 一 - - — M 
IBB BEdib-O-q-iso- fos-i? 4e z[Emz)G vows $ Debug 


= C in HeloArdroidActivtyjava ON. ze 
E package edu.hrbeu.HelloAndroid; n 


4 i HelloAndrcid 
ors public class HelloAndroidactivity extends Activity ( 
ibo ———— — /** Called when the activity is first created. */ 
> [B] Helloandroidaciviyjava © override 
4 器 gen [Generated Java Files] a public void onCreate(Bundle savedInstenceState) ( 
€ in super. ocreste(ssvedinstancestate); 
KEON SetContentview(R. layout .nain); 
4 mà Android 40 


» Ë androidjar - GAAndroid\androi 


© inport android.app-Activity;[] 


> © drawable-hdpi 
> @ drawableldpi 
b @ drawable-mdpi ~ 
> @ layout * 


> Be values @ > ENEL 
a ein rsd š 


| 1.10 Eclipse 集成 开发 环境 
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相 比 之 下 ,App Inventor 为 用 户 提供 了 更 为 便捷 的 开发 环境 和 方法 ,具有 操作 简单 、 
可 视 化 .模块 化 .事件 置顶 .正确 性 高 和 便于 调试 等 优点 。 


1. 操作 简单 


使 用 App Inventor 无 须 具备 编程 知识 ,也 不 需要 记忆 和 编写 代码 ,程序 的 组 件 和 功 
能 都 存储 在 模块 编辑 库 中 ,在 创建 程序 时 只 需 将 其 拖 忠 到 编辑 区 域 进 行 组 合 即 可 ,用 户 
不 需要 记忆 如 何 输入 指令 或 参考 任何 编程 设计 手册 ,如 图 1. 11 所 示 。 
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2. 可 视 化 和 模块 化 


在 App Inventor 中 ,不 仅 用 户 界面 开发 是 可 视 化 和 模块 化 的 ,程序 逻辑 的 开发 也 是 
如 此 。 在 图 1.12 中 ,模块 被 分 为 不 同 的 类 别 , 并 且 标 记 成 不 同 的 颜色 ,执行 不 同 的 动作 。 
在 设置 每 个 组 件 的 行为 时 ,犹如 玩乐 高 积木 ,逻辑 关系 一 目 了 然 。 


3. 事件 处 理 器 


在 传统 的 编辑 语言 中 ,对 程序 最 贴切 的 比喻 是 “一 个 程序 就 像 一 个 处 方 ,一 个 说 明 
书 ”。 然 而 , 随 着 图 形 用 户 界面 的 出 现 ,程序 不 再 像 处 方 一 样 了 ,而 变 成 了 “事件 处 理 器 ”。 
如 图 1.13 所 示 , 单 击 按钮 Button 1 时 ,程序 播放 音频 sound 1, 这 便 是 正确 的 事件 处 理 器 


when  Button'.Click 
millisecs URS gs do i 
cal 

Sound1.Pl 


二 —ə c - 


1.12 App Inventor 模块 化 编辑 语言 图 1.13 事件 置顶 


when Buttoni1.Click 
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对 于 App Inventor 来 说 ,一 个 应 用 程序 便 是 一 套 事件 处 理 器 。 当 用 户 想 要 设计 一 个 
按钮 被 单 击 后 的 效果 时 ,只 需 拖 中 出 按钮 的 单 击 事件 模块 ,并 把 单 击 后 要 发 生 的 行为 模 
块 放置 在 按钮 单 击 事件 模块 中 就 可 以 了 。 在 设计 应 用 软件 的 过 程 中 ,模块 的 每 个 功能 行 
为 都 预先 设计 好 ,并 摆 放 在 开发 环境 中 供用 户 使 用 ,这 样 不 但 简化 了 程序 开发 工作 ,也 使 
整个 编程 过 程 显 得 分 外 清晰 。 


4. 正确 性 高 且 便于 调试 


在 代码 式 编程 过 程 中 ,出 现 错误 后 信息 比较 隐秘 ,无 法 简单 地 遏制 错误 的 发 生 。 而 
App Inventor 的 模块 编辑 语言 可 以 从 一 开始 就 限制 编程 的 出 错 几 率 。 例 如 ,如 果 选 择 了 
一 种 参数 模块 槽 , 便 无 法 将 其 他 类 型 的 参数 模块 与 其 拼接 ,这 样 便 降 低 了 参数 设置 错误 
的 几率 。App Inventor 允许 相 匹 配 的 模块 进行 拼接 ,这 个 特点 在 一 定 程度 上 保证 了 编程 
的 正确 性 。 

如 果 编 程 过 程 中 出 现 了 错误 ,可 以 利用 App Inventor 的 回收 站 ,用户 只 要 将 错误 的 
组 件 直接 拖 虹 进 去 便 可 删除 ,这 比 起 代码 开发 方式 中 对 错误 的 修补 要 方便 简捷 得 多 。 在 
应 用 程序 的 开发 过 程 中 ,用 户 可 以 随时 在 自己 的 Android 设备 上 或 模拟 器 上 进行 调试 ， 
发 现 的 错误 可 以 随时 进行 修改 。 

当然 ,App Inventor 也 有 它 的 不 足 之 处 。 目 前 App Inventor 开发 出 来 的 程序 ,只 能 
通过 下 载 安 装 在 手机 上 ,或 者 下 载 到 计算 机 上 ,但 不 能 发 布 到 Google Play 上 供 他 人 下 
载 。App Inventor 目前 还 不 能 产生 Java 代码 ,因此 也 无 法 将 开发 完成 后 的 程序 导 人 
Eclipse 进行 再 次 开发 。 上 述 App Inventor 的 不 足 之 处 ,谷歌 官方 正在 积极 解决 ,希望 不 
久 的 将 来 App Inventor 可 以 更 加 成 熟 、. 易 用 。 


14 App Inventor 作品 属 示 
本 节 介绍 使 用 App Inventor 制作 出 来 的 手机 软件 作品 ,以 便 使 读者 能 够 直观 地 了 解 


App Inventor 的 开发 能 力 。 
如 图 1.14 ros ,这 是 一 款 增 扩 实 境 的 国际 象棋 游戏 。 玩 家 用 手机 选择 自己 的 团队 


图 1.14 增 扩 实 境 国际 象棋 游戏 
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和 开 棋 的 位 置 ,利用 室外 的 开阔 地 作为 棋盘 ,然后 他 们 充当 棋子 来 回 移动 。 游 戏 通过 
GPS 来 记录 每 个 玩家 的 移动 轨迹 ,并 在 手机 屏幕 上 展示 玩家 在 虚拟 棋盘 上 的 位 置 。 
美国 海军 陆 战 了 从 上 士 Chris Mstzger, 利 用 App Inventor 开发 了 一 款 应 用 软件 ,可 以 
帮助 海军 陆 战 队 士兵 摧毁 在 战场 上 发 现 的 炸药 ,如 图 1.15 所 示 。 
在 海地 ,人 道 主义 开源 软件 项 目 利 用 App Inventor 开发 了 两 款 软件 ,帮助 了 那里 的 
人 道 主 义 救 援 人 员 实 地 记录 降雨 量 和 物价 的 变化 ,如 图 1.16 所 示 。 


1.15 弹药 检查 软件 图 1.16 统计 软件 


阿拉 巴 马 州 劳伦斯 郡 高 中 的 学 生 用 App Inventor 开发 了 一 款 物种 检查 软件 ,用 来 记录 
野猪 的 出 没 ,如 图 1.17 所 示 。 这 款 软件 所 记录 的 数据 ,将 帮助 科学 家 了 解 野 猪 和 人 侵 的 问题 。 

Google 图 书 搜索 软件 在 搜索 时 ,用 户 可 以 输入 书籍 的 全 名 或 书 名 的 关键 词 , 然 后 根 
据 用 户 所 输入 的 内 容 显示 最 相关 的 书籍 信息 ,图 1. 18 是 该 软件 的 运行 界面 。 
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图 1.17 物种 检查 软件 图 1.18 Google 图 书 搜索 软件 
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通过 前 面 的 介绍 ,相信 读者 已 经 对 App Inventor 有 了 一 定 的 了 解 ,下 面 介绍 一 些 
App Inventor 的 学 习 资 源 网 站 ,这 些 网 站 中 的 资源 可 以 帮助 读者 更 好 地 学 习 和 使 用 App 
Inventor, 创 造 出 更 多 有 趣 的 应 用 程序 。 


1. MIT App Inventor 


MIT App Inventor(http; //appinventor. mit. edu) 为 学 习 者 提供 了 由 浅 入 深 的 软件 
制作 课程 ,如 图 1.19 所 示 。 其 中 的 Teach 部 分 为 教学 提供 了 文章 、 书 籍 和 教程 等 多 种 教 
学 辅助 资源 ;Explore 部 分 展现 了 App Inventor 的 开发 能 力 、 作 品 和 开发 团队 等 内 容 ; 
Invent 部 分 可 以 使 用 App Inventor 进行 Android 应 用 程序 开发 。 


m 
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MIT Center for Mobile Learning 


¿S 


| Welcome to MIT App Inventor J 
š "T j 


App Inventor can now connect wirelessly to phones and tablets! 


Important Notices: 


Connecting Wirelessly? Upgrade Companion App to 2.05 
Using Android 4.2.2 and a USB Cable? Upgrade adb 


1.19 MIT App Inventor 网 站 


2. App Inventor 中 文学 习 网 


该 网 站 (http://www. appinventor. tw/home) 为 CAVE 教育 国际 与 翰 尼 斯 企业 有 限 
公司 合作 架构 的 App Inventor 教育 平台 ,为 学 习 者 提供 优秀 的 网 络 学 习 环 境 、. 中 文 说 明 
和 一 些小 应 用 程序 的 源 代码 ,如 图 1.20 所 示 。 


3. App Inventor Blocks 


该 网 站 (http: //www. appinventorblocks. com/home) 介 绍 了 如 何 安装 和 配置 App 
Inventor, 介 绍 了 一 些 界面 组 件 的 用 途 , 并 提供 范例 程序 的 源 代码 ,如 图 1. 21 所 示 。 该 网 
站 提供 了 一 些 App Inventor 作品 的 展示 ,在 该 网 站 Other Resources 栏目 当中 ,可 以 找到 
网 站 推荐 的 一 些 学 习 资源 。 
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1.20 App Inventor 中 文学 习 网 


App Inventor Blocks 


Create Android Apps Without Any Knowledge in Programming! | | | soaren ms see | 


ANNOUNCEMENT: SpyPanda made with Applnventor is on Market. Please download and leave a review. Thank you very much. 
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中 = 


ponding image anc » a specific sound. Here's a snapshot of the app we are about to make 


1.21 App Inventor Blocks 网 站 


4. 高 师 大 附中 资讯 社 App Inventor 教学 网 


该 网 站 (https: //sites. google. com/a/stu. nknush. kh. edu. tw/appinventor/) 属于 
台湾 高 师 大 附中 资讯 社 ,为 学 习 者 提供 了 全 面 的 App Inventor 背景 和 开发 环境 介绍 ,并 
配 有 教学 范例 ,是 为 数 不 多 的 适合 初学 者 的 中 文 网 站 ,如 图 1. 22 所 示 。 


5. Stevozip 


学 习 者 可 在 该 网 站 (https: //sites. google. com/site/stevozip) 中 找到 关于 App 
Inventor 的 视频 和 非 视频 教程 ,以 及 技术 论坛 等 资源 ,如 图 1. 23 所 示 。 
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高 师 大 附中 资讯 社 App Inventor 教学 网 
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1.22 高 师 大 附中 资讯 社 App Inventor 教学 网 


Search this site 


Stevozip 


Navigation Home 


App Inventor video 


tutorials 
Greetings traveler! This site will, for the present, act as a launching point for tutorials I come up with for App Inventor for 


App Inventor non-video 
Android. If you want to know more about App Inventor, click here. 


tutorials. 
Resource links 


* Go here for video tutorials. 
* Using the Notifier 
* Checkboxes as radio buttons 
* TinyDE 

* Go here to see non video tutorials. 
* TinyDB 

Checkboxes as radio buttons 

ForEach loop 

Creating a music player 

Keeping a high score list. 


登录 | 最 近 的 站 点 笑 动 | HEX) | 打印 页面 | MERAH | 由 Coogle 协作 平台 强力 驱动 


图 1.23 Stevozip 网 站 


除 此 之 外 ,还 有 许多 英文 网 站 也 提供 了 App Inventor 的 各 种 开发 资源 : 

(1) tAIR 一 一 The App Inventor Repository(http: //www. tair. info/) (图 1. 24); 
(2) Pura Vida Apps(http: //puravidaapps. com/index. php); 

(3) Android Aid(http: //android. jwtyler. com) , 
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tAIR - The App Inventor. 
Repository 


Putting te Pieces Together 
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Welcome and Pura Vida! 


T— ——— aopmanior 


Here you can find my Android apps developed with App Inventor 
Which are available for downoad at Z Google Pay and BAndroidPit 


Also there is a big section of App Inventor Code Snippets and 


Do you need help with your App Inventor project? | can holp you for ono hour I charge 255 
Please contact me at ImioGhpuravidaapps com for details 


1.24 App Inventor 学 习 资 源 网 站 
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1. 简 述 App Inventor 与 传统 编程 方式 的 区 别 。 
2. 简 述 App Inventor 的 优势 和 不 足 。 
3. 尝试 从 App Inventor 学 习 资 源 网 站 中 ,下 载 并 运行 一 些小 应 用 程序 。 
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App Inventor 开发 环境 


App Inventor 开发 环境 的 安装 与 配置 是 开发 应 用 程序 的 第 一 步 , 也 是 深入 理解 App 
Inventor 的 一 个 良好 的 途径 。 通 过 本 章 的 学 习 , 读 者 可 以 掌握 安装 、 配 置 App Inventor 
开发 环境 的 步骤 和 注意 事项 ,熟悉 App Inventor 的 界面 编辑 器 和 模块 编辑 器 ,掌握 使 用 
手机 和 模拟 器 进行 程序 调试 的 方法 。 

本 章 学 习 目 标 

。 掌握 App Inventor 开发 环境 的 安装 配置 方法 ; 

* HS App Inventor 的 界面 编辑 器 和 模块 编辑 器 ; 

。 掌握 使 用 手机 和 模拟 器 进行 程序 调试 的 方法 。 


21 开发 前 准备 


使 用 App Inventor 进行 开发 之 前 ,首先 要 检查 一 下 所 使 用 的 操作 系统 和 浏览 器 是 否 


[=] 
支持 App Inventor 开发 。App Inventor 所 支持 的 操作 系统 和 浏览 器 如 表 2. 1 和 表 2.2 
所 示 。 


表 2.1 App Inventor 所 支持 的 操作 系统 
操作 系统 版 本 说 明 
Macintosh Mac OS X 10. 5 或 更 高 版 本 
Windows Windows XP, Windows Vista, Windows 7 
GNU/Linux Ubuntu 8 或 更 高 版 本 ,Debian 5 或 更 高 版 本 


表 2.2 App Inventor 所 支持 的 浏览 器 
浏览 器 名 称 版 本 说 明 


浏览 器 名 称 版 本 说 明 
Mozilla Firefox 


Google Chrome 


3. 6 或 更 高 版 本 
5. 0 或 更 高 版 本 


4. 0 或 更 高 版 本 
Microsoft Internet Explorer 7 或 更 高 版 本 


Apple Safari 


使 用 App Inventor 开发 前 需要 做 4 个 步骤 的 准备 工作 ,如 图 2.1 所 示 。 首 先 要 安装 
Java 运行 环境 ,其 次 是 安装 App Inventor 软件 ,然后 是 启动 App Inventor 进行 Android 
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程序 开发 ,最 后 是 使 用 Android 设备 或 模拟 器 运行 Android 程序 。 


1 


3. 注 册 Gmail 邮 箱 


Y 


4. 启 动 App Inventor 
i | t 


模拟 器 调试 1 usSB 连 接手 机 调试 “ WiFi 连 接手 机 调试 
y... UU U... 


图 2.1 App Inventor 开发 环境 配置 步骤 


如 果 计 算 机 操作 系统 中 已 经 安装 了 Java 运行 环境 , 则 可 以 直接 进行 第 二 步 “安装 
App Inventor 软件 ”, 如 果 没 有 ,请 参考 下 面 的 Java 运行 环境 安装 方法 。 

首先 在 浏览 器 地 址 栏 中 输入 网 址 “http: //www. java. com”, BË À Java 下 载 首 页 ,如 
图 2. 2 所 示 。 单 击 页 面 中 的 “免费 Java 下 载 ” 按 钮 跳 转 至 最 新 版 本 的 Java 下 载 页 面 。 


P 


JAVA 与 您 ， 
立即 下 载 


> 什么 星 Java? » 我 有 Java 凤 9 ”> 星 否 要 要 帮助 ? 
所 有 Java 下 载 


体验 Java 应 用 《英文 站 点 ) 


@Alice AYA 


Java * Alice Java*Livescribe “Java + Nell Young "Java + Blu-ray Dise 


2.2 Java 下 载 首页 


在 最 新 版 本 的 Java 下 载 页 面 中 , 单 击 “ 同 意 并 开始 免费 下 载 ” 按 钮 ,开始 下 载 最 新 版 
本 的 Java 运行 环境 ,如 图 2. 3 所 示 。 笔 者 下 载 Java 运行 环境 的 版 本 是 7. 11, 文 件 名 为 
JavaSetup7ull. exe, 


如 图 2. 3 所 示 的 页 面 中 没有 正确 识别 读者 使 用 的 操作 系统 , 则 可 单 击 页 面 下 方 的 
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sa 推荐 Version 7 Update 11 (文件 大 小 : 854 KB) 

> El Java 

zia 同意 并 开始 免费 下 载 
> Riffelh 


—- 下 载 Java EKBIS EDIS OHIO RAE RO P M NE 
JE | 


您 是 否 同时 在 使 用 32 位 和 同 ” 当 .3 去 半 寺 Fa， 你 可 能 震 要 重新 启动 浏览 器 (关闭 所 有 浏 点 六 窗口 并 重 休 打 开 ) 才能 启用 


Sa pat dna 
适用 于 Windows f} 64 fù 
: mja 
Jaa amia N 
» rim 


操作 系统 不 正确 ? 查看 所 有 Java 下 载 。 


适用 于 您 的 计算 机 的 Java 软件 ， 即 Java 运行 时 环境 ， 也 称 为 Java 运行 时 、 和 运行 时 环境 、 运 行 时 、JRE、 
Java 虚拟 机 、 虚 拟 机 、Java VM, JVM, VM, 或 Java 下 载 。 


TIED 
ŽE | FHA | 2AA 


图 2.3 最 新 版 本 的 Java 下 载 页 面 


“查看 所 有 Java 下 载 ” 链 接 , 根 据 读者 操作 系统 的 类 型 选择 适合 的 Java 运行 环境 版 本 , 目 
前 Java 有 Windows 版 本 、Mac OS X 版 本 、Linux 版 本 和 Solaris 版 本 。 

Fifi Windows 系统 为 例 介 绍 Java 运行 环境 的 安装 和 配置 过 程 。 首 先 运行 笔者 下 
载 的 Java 运行 环境 文件 JavaSetup7ull. exe, 启 动 安装 程序 ,如 图 2.4 所 示 。 


Java RAES -MUER o e - = 
< 
=Æ Java ORACLE 
欢迎 使 用 Java 


通过 Java 您 可 以 安全 可 靠 地 访问 精彩 的 Java 内 容 世 界 。 从 商业 解 ; ADADAN 
实用 程序 和 娱乐 程序 , Java 都 能 提高 您 的 Intemet 体验 ， 使 生活 丰富 多 彩 


注 :在 我 们 的 安装 过 程 中 , 不 会 收集 个 人 信息 。 
单 击 此 处 了 解 有 关 我 们 所 收集 内 容 的 详细 信息 。 


单 击 ' 安 装 "以 接受 ”许可 协议 ”并 立即 安装 Java。 


r 更 改 目标 文件 来 取消 安装 四 > 


2.4 Java 安装 页 面 


如 果 无 须 修改 Java 运行 环境 的 安装 目录 , 则 可 以 直接 单 击 “ 安 装 ” 按 钮 ,否则 选择 “更 
改 目标 文件 夹 ” 复 选 框 , 修 改 Java 运行 环境 的 安装 目录 。 

Java 运行 环境 安装 成 功 后 ,出 现 “ 您 已 成 功 安装 Java” 的 提示 ,如 图 2. 5 所 示 。 

在 进行 下 一 步 准 备 工作 前 ,读者 需要 确认 所 使 用 的 操作 系统 和 浏览 器 是 否 被 App 
Inventor 支持 。 


16 Quam £ asus q t 3— ú 8 3 Z B K Qp deris 


Java 安装 - 完成 


V 您 已 成 功 安装 Java 


当 Java 更 新 可 用 时 . 系统 将 提示 您 下 载 并 安装 。 建议 您 始终 执 
行 此 操作 . 从 而 确保 您 的 系统 拥有 最 新 的 性 能 和 安全 性 改进 。 


如 果 要 更 改 此 行为 , 请 参考 说 明 。 


图 2.5 Java 安装 成 功 


22 安装 App Inventor 软件 


安装 App Inventor 前 , 先 要 下 载 App Inventor 软件 包 ,在 浏览 器 地 址 栏 中 输入 网 址 
"http: //appinventor. mit. edu/explore/install-app-inventor-software. html". jË À App 


Inventor 操作 系统 选择 页 面 ,如 图 2. 6 所 示 。 


Install the App Inventor Setup Software 


Before you can use App Inventor, you need to install some software on your computer. The software you 
need is provided in a package called App /nventor Setup. Follow the instructions for your operating system 
to do the installation, and then come back to this page to move on to Step 3 (starting App Inventor) and 
Step 4 (setting up your device or emulator). 


* Instructions for Mac OS X 
* Instructions for GNU/Linux 
* Instructions for Windows 


2.6 App Inventor 操作 系统 选择 页 面 


App Inventor 支持 Mac OS X,GNU/Linux 和 Windows 三 种 操作 系统 。 笔 者 使 用 
的 是 Windows 操作 系统 ,因此 选择 Instructions for Windows 进入 App Inventor 下 载 页 
面 ,如 图 2.7 所 示 。 

单 击 Download 按钮 下 载 App Inventor 软件 安装 包 , 文 件 为 AppInventor_Setup_ 
Installer_v_1_2. exe。 双 击 下 载 的 文件 进入 App Inventor 安装 界面 ,如 图 2. 8 所 示 。 

单 击 Next 按钮 ,显示 App Inventor 安装 协议 ,如 图 2.9 所 示 。 

直接 单 击 I Agree 按钮 ,同意 安装 协议 的 条 款 ,并 进入 App Inventor 的 目录 选择 界 
面 ,如 图 2.10 所 示 。 

如 果 没 有 特殊 要 求 , 可 以 使 用 App Inventor 的 默认 目录 进行 安装 。 单 击 Next 按钮， 
进入 App Inventor 开始 ?菜单 目录 选择 界面 ,如 图 2. 11 所 示 。 
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Installing the App Inventor Setup software package 


We recommend that you perform the installation from an account that has administrator privileges. This will 
install the software for all users of the machine. If you do not have administrator privileges, the installation 
should still work, but App Inventor will be usable only from the account you used when you installed. 


. Download the installer. 

2. Locate the file AppInventor Setup Installer v 1. 2.exe (~92 MB) in your Downloads file or your 
Desktop. The location of the download on your computer depends on how your browser is configured. 

3. Open the file. 

M. Click through the steps of the installer. Do not change the installation location but record the installation 

directory, because you might need it to check the driver. The directory will differ depending on your 

version of Windows and whether or not you are logged in as an administrator. 


图 2.7 App Inventor F X Xi iB 


“Q Appinventor Setup Setup olea 


Welcome to the AppInventor Setup 
Setup Wizard 


This wizard wil guide you through the installation of 
Appinventor Setup. 

It is recommended that you dose all other applications 
before starting Setup. This wil make it possible to update 
relevant system files without having to reboot your 
computer. 


Click Next to continue. 


[net> | [ Cance | 
2.8 App Inventor 安装 界面 


© Applnventor Setup Setup 


License Agreement 
Please review the icense terms before instaling AppInventor Setup. 


Press Page Down to see the rest of the agreement. 
is is the Applnventor Setup Software 


(3 
It consists of portions of the Android Software Development Kit, which is 
igoverned by the following license: 


1. Introduction 


1.1 The Android Software Development Kit (referred to in this License 
qreement as the “SDK” and specifically including the Android system ~ 


If you accept the terms of the agreement, dick I Agree to continue. You must accept the 
agreement to install AppInventor Setup. 


[ <s IAgree | | Cancel 


图 2.9 App Inventor 安装 协议 


Qu«sx Crdnod fz A 4i 2 —— É) # Z 42 X Opp denton 


(9) Appinventor Setup Setup 


Choose install Location 


Choose the folder in which to install AppInventor Setup. 


EILLILLIL Enel To install n a different folder, dik 
Browse and select another folder. Click Next to 


Destination Folder. 


C: Program Fies (x85) Wpplnventor Fommands -for-Apbinventor 


Space required: 173.5MB 
Space available: 26.9GB 


Nullsoft Install System v2.46. 


图 2.10 App Inventor 目录 选择 界面 


Choose Start Menu Folder 


Choose a Start Menu folder for the Applnventor Setup shortcuts. B 


Select the Start Menu folder in which you would ike to create the program's shortcuts. You 
can also enter a name to create a new folder. 


Mcrosoft Siveright 
加 po not create shortcuts 


Nullsoft Install System v2.46 


(emm mmm ) ( omm] 
Hi 2.11 


App Inventor" 开始 "菜单 目录 选择 界面 


不 必修 改 “ 开 始 ” 菜 单 目 录 , 直接 使 用 App Inventor 安装 程序 推荐 的 目录 即 可 , 然 
单 击 Install 按钮 进行 安装 ,如 图 2. 12 所 示 。 


Installing 
Please wait while Appinventor Setup is being installed. B 


Extract: system.img... 86% 


Nullsoft Install System v2.46 


Æ 2.12 App Inventor 安装 进度 界面 
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安装 完成 后 ,会 出 现 安装 成 功 界面 ,如 图 2.13 所 示 。 单 击 Finish 按钮 退出 App 
Inventor 的 安装 程序 。 


(Qapewetorsepsettp —  (SyeyrmT 


Completing the AppInventor Setup 
Setup Wizard 


Appinventor Setup has been installed on your computer. 
Click Finish to dose this wizard. 


( < Jaume] [ co | 


Æ 2.13 App Inventor 安装 成 功 界面 


23 注册 Qril 邮箱 帐号 


App Inventor 是 一 个 基于 浏览 器 的 集成 开发 环境 ,为 了 能 够 区 分 不 同 的 用 户 , App 
Inventor 需要 使 用 Google 的 Gmail 邮箱 账号 进行 登录 。 因 此 在 使 用 App Inventor 之 
前 ,首先 要 介绍 一 下 如 何 申请 Google 的 Gmail 邮箱 账号 。 

打开 Web 浏览 器 ,在 地 址 栏 中 输入 “http: //www. google. com. hk”, 进 入 谷歌 搜索 
页 面 ,如 图 2. 14 所 示 , 单 击 页 面 右上 角 的 “登录 ”按钮 ,进入 Gmail 邮箱 登录 页 面 ,如 
图 2.15 所 示 。 


搜索 hi ay Y à ex Xt 


Google 


Google 搜索 手气 不 错 


Google com hk 使 用 下 列 语言 。 中 文 (#8) Engish 


加 入 营销 计划 。 隐私 权 和 使 用 条 款 ” Google 大 全 Google.com 


2.14 谷歌 搜索 页 面 
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Google 


账户 
登录 Google 账户 享受 Google 提供 的 更 多 服务 。 ER e 
TENER m 免 珊 创建 账户 AUS MIE 
| | 

`M Gmail 

与 朋友 畅 耶 ， 而 且 不 必 担 心 措 过 任何 重要 的 电子 邮件 > *a 3 E 
Q, 个 性 化 搜索 

根据 您 过 去 的 搜索 记录 ， 提 供 相关 性 更 强 的 搜索 结果 v ceres 
(^ ER Googe 13? 

TUA, SOE 无 法 访问 您 的 账户 ? 

将 Google 设 为 主页 。 
日 2013 Google MERR MUREM ”帮助 p ex El 


图 2.15 Gmail 邮箱 登录 页 面 


单 击 页 面 右上 角 的 “注册 ”按钮 ,进入 Gmail 邮箱 注册 页 面 ,如 图 2. 16 所 示 。 在 
Gmail 注册 页 面 中 填写 用 户 信 息 ,完成 账号 注册 过 程 。 


Google E 
创建 新 的 Google 账户 
T 您 的 Google 账户 不 只 是 能 
= N 用 于 搜索 哦 。 na 
QH yaa ER 名 字 
) c$ 
$ e 选择 全 的 用 户 名 
OP = 
T ansa 
You 
: 
L] usn 
生日 
年 月 SIE 
ta 
我 的 性 别 是 一 $ 
手机 
aS +36 
您 当 首 的 电子 邮件 地 址 


图 2.16 Gmail 邮箱 注册 页 面 
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首先 进入 MIT App Inventor 的 网 站 ,如 图 2. 17 所 示 , 单 击 Invent 按钮 ,进入 Gmail 
邮箱 登录 界面 ,使 用 先前 注册 的 Gmail 账号 登录 即 可 。 
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App Inventor can now connect wirelessly to phones and tablets! 


imponan Non 
Connecting wrelessy? Upgrade Companion App 102 05 
Using Android 4.2 2 and a USO Cable? Uporade adb 


EIBINI-IET-TIETEIEE E 


Educator Resources. "formation & Tutoriais Create Mobile Apps 


2.17 MIT App Inventor 网 站 


成 功 登 录 后 ,进入 App Inventor 的 “我 的 项 目 ” 页 面 ,如 图 2. 18 所 示 。“ 我 的 项 目 ” 页 
面 ,在 用 户 首次 登录 时 可 以 直接 进入 。 首 先 简单 介绍 一 下 页 面 上 的 一 些 功 能 按钮 ,在 
图 2. 18 中 用 数字 标 出 的 部 分 ,将 在 下 面 逐一 进行 介绍 。 


teApp tor beta release. Be sure lo check the Lat Updates Sasia 
nd release notes Try the App Inventor e 
(Beta) You now need to use MIT A/Companion 
2.05 dor WiFi Development. 


nanea Duie Crested 
HelloPurr 2012 Dec 17 11:31:52 
LadybugChaseGame 2012 Dec 21 11:24:30 
2013 Jan 4 16:14:26 
2012 Dec 20 1353:52 
2012 Dec 20 15:23:17 
NoTextinguhileDriving 2012 Dec 20 15:46:00 
PaintPot 2012 Dec 19 09:30:04 


2.18 “我 的 项 目 ” 页 面 


CD 我 的 项 目 (My Projects) .界面 设计 器 (Design) 和 使 用 说 明 (Learn) 链 接 。 

My Projects 显示 用 户 设计 完成 或 正在 进行 的 Android 软件 项 目 ; Design 按钮 可 以 
打开 “界面 设计 器 ”页 面 ,“ 界 面 设 计 器 ”是 辅助 用 户 进行 Android 界面 设计 和 开发 的 工 
F; Learn 按钮 可 以 打开 MIT App Inventor 的 学 习 资 料 页面 , 这 里 有 各 阶段 的 课程 和 教 
学 资源 。 

(2) 新 建 项 目 (New) WERI H (Delete) 、 下 载 全 部 项 目 (Download All Projects) fl 
更 多 操作 (More Actions)。 

New 按钮 可 以 新 建 一 个 工程 项 目 ;Delete 按钮 则 可 删除 已 有 的 项 目 ;Download All 
Projects 按钮 可 以 将 所 有 项 目的 源 代码 打包 下 载 , 只 要 在 弹出 的 对 话 框 中 选择 存储 路 径 
即 可 ;More Actions 按钮 支持 更 多 操作 ,如 下 载 某 个 项 目的 源 代码 (Download Source) , 
上 传 某 个 项 目的 源 代 码 (Upload Source), 下 载 密 钥 (Download Keystore), E f£ 9 4H 


22 Qua z aua 813—818 < dn duct 


(Upload Keystore) 和 删除 密 钥 (Delete Keystore) 。 
(3) 项 目 (Projects) 列 出 了 现 有 的 所 有 项 目 ,显示 的 内 容 包括 项 目的 名 称 和 创建 
时 间 。 


241 界面 设计 器 


界面 设计 器 (Design) 是 App Inventor 的 重要 组 成 部 分 ,以 可 视 化 的 方式 设计 
Android 程序 的 用 户 界面 ,提供 了 大 量 常用 的 界面 组 件 ,并 可 以 设置 组 件 的 属性 值 ,如 
图 2.19 所 示 。 


2.19 界面 设计 器 


界面 设计 器 主要 由 9 个 部 分 组 成 ,下 面 依次 介绍 各 部 分 的 功能 : 

CD 这 里 显示 的 是 当前 项 目 名 称 。 

(2) 保存 (Save) 和 另存 为 (Save as) 用 来 保存 当前 项 目 ; 检 查 点 (Checkpoint) 用 来 设 
置 回溯 点 ,便于 后 期 追溯 和 修改 ;增加 屏幕 页 (Add Screen) 和 删除 屏幕 页 (Remove 
Screen) 用 来 增 减 屏 幕 页 。 

(3) 打开 模块 编辑 器 (Open the Blocks Editor) , 当 完 成 用 户 界面 设计 后 , 单 击 此 按钮 
进入 “模块 编辑 器 ”, 进 行程 序 逻 辑 方面 的 设置 。 

(4) 获取 应 用 程序 (Package for Phone) 帮 助 用 户 将 程序 下 载 到 计算 机 或 手机 中 ， 
有 三 种 途径 : 显示 二 维 码 (Show Barcode) , 下载 到 本 机 (Download to this Computer) 
和 下 载 至 手机 (Download to Connected Phone 。 其 中 , “显示 二 维 码 ”将 产生 一 个 二 
维 码 图 像 ,用 户 使 用 手机 二 维 码 扫描 软件 扫描 此 图 像 , 则 可 以 获得 应 用 程序 的 下 载 
链接 地 址 ,但 这 个 链接 只 供 开 发 者 本 人 使 用 ,因为 需要 开发 者 的 Gmail 账号 登录 后 才 
可 以 下 载 。 

(5) 控件 库 (Palette) ,这 里 显示 了 App Inventor 提供 的 全 部 界面 控件 。 

(6) 设计 区 (Viewer) ,用 户 在 设计 界面 时 ,将 “控件 库 ” 中 的 组 件 拖 忠 到 设计 区 内 ,组 
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件 将 呈现 在 该 区 域内 ,并 且 组 件 的 部 分 属性 也 会 显示 出 来 。 

(7) 模块 区 (Components) ,以 树 形 显示 组 件 之 间 的 关系 ,可 以 在 此 区 域 对 组 件 进行 
重 命名 和 删除 。 

(8) 资源 区 (Media) ,显示 用 户 使 用 到 的 所 有 资源 素材 ,如 声音 和 图 片 。 资 源 区 
下 方 的 “上传 新 资源 ”(Upload new) 按 钮 ,可 以 将 本 地 资源 素材 文件 上 传 到 资源 
区 中 。 

(9) 属性 设 定 区 (Properties) ,可 以 在 这 一 区 域 为 每 个 组 件 设 定 所 需 的 属性 。 


242 模块 编辑 器 


模块 编辑 器 (Blocks Editor) 是 Android 程序 逻辑 和 动作 模块 的 设计 区 域 。 在 界面 设 
计 器 中 单 击 Open the Blocks Editor 按钮 ,下 载 并 运行 AppInventorForAndroidCodeblocks. 
jnlp 文件 ,模块 编辑 器 的 界面 如 图 2. 20 所 示 。 


四 


2. 20 ”模块 编辑 器 


模块 编辑 器 主要 由 6 个 部 分 组 成 ,下 面 依 次 介绍 各 部 分 的 功能 。 
1. 模块 编辑 库 


在 模块 编辑 库 中 可 以 找到 进行 程序 逻辑 设计 的 模块 。 开 发 者 可 以 设 定 界 面 组 件 的 
逻辑 关系 和 动作 ,这 些 都 可 以 通过 简单 的 拖 忠 和 拼接 就 可 以 完成 。 


2. RE (Save) ,恢复 上 一 步 (Undo) 和 重 做 (Redo) 


“保存 可 以 保存 现 有 的 模块 拼接 :恢复 上 一 步 ? 是 在 本 步骤 操作 出 现 错误 时 , 重 现 
上 一 步 的 内 容重 做 ?是 重 做 本 步骤 内 容 。 
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3. 新 建 模拟 器 (New emulator) 和 连接 设备 (Connect to Device) 


“新 建 模拟 器 ?可 以 启动 Android 模拟 器 六 连接 设备 ”的 下 拉 列 表 中 可 选择 已 连接 的 
手机 或 模拟 器 进行 调试 。 


4. 设计 区 域 缩 放 器 

用 于 调整 设计 区 域 的 大 小 ,并 可 通过 该 控件 观察 到 整个 设计 区 域 的 布局 。 

5. 设计 区 

用 于 放置 和 编辑 逻辑 模块 的 区 域 , 整 个 逻辑 和 动作 的 设计 过 程 在 此 区 域 进 行 。 
6. 回收 站 

用 于 删除 逻辑 模块 ,方法 是 直接 将 要 删除 的 逻辑 模块 拖 忠 进 回收 站 即 可 。 


25 程序 调和 起 


App Inventor 提供 多 种 程序 调试 方法 ,不仅 可 以 将 程序 直接 下 载 到 模拟 器 中 进行 调 
试 , 还 可 以 通过 USB 数据 线 或 者 WiFi 连接 ,将 程序 下 载 到 手机 设备 中 进行 调试 。 


251 Andad 模 拟 器 


Android 模拟 器 支持 在 没有 手机 设备 的 情况 ,在 计算 机 上 对 Android 程序 进行 开发 、 
调试 和 仿真 。 目 前 ,App Inventor 为 用 户 提供 的 是 Android 2. 2 版 本 的 模拟 器 。 

启动 Android 模拟 器 的 方法 是 在 模块 编辑 器 的 右上 角 单 击 New emulator 按钮 , 打 
开 模 拟 器 启动 提示 界面 ,如 图 2. 21 所 示 。 


Please wait.It can take 2 or 3 minutes for the emulator to become ready — even longer 
the first time. 


|The emulator will be ready when the phone screen has a picture 
background as shown in the right image here. If it has a lock screen, as shown 
in the left, slide the bar with the green lock icon to the right to unlock it. 


Even after the picture appears, continue to wait for the emulator 
to finish preparing the SD card: watch the notification area at the 
top of the emulator screen. 


When the emulator is ready, choose it from the Connect to Device menu 
to connect 


The Troubleshooting Guide at http: //beta.appinventor.mit.edu/learn/troubleshooting.html 
may provide further help. 


— 
ox | 


2.21 模拟 器 启动 提示 界面 


稍 后 会 弹出 Android 模拟 器 的 运行 界面 ,中 央 显 示 ANDROID 字样 。 模 拟 器 完全 启 
动 后 ,会 显示 Android 锁定 界面 ,向 右 滑 动 解锁 图 标 解 锁 , 如 图 2. 22 所 示 。 
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图 2.22 Android 模拟 器 


模拟 器 启动 完成 后 ,在 模块 编辑 器 的 右上 角 单 击 Connect to Device 按钮 ,从 下 拉 菜 
单 中 选择 刚 启 动 的 Android 模拟 器 ,笔者 模拟 器 的 编号 
为 emulator-5554, 如 图 2. 23 所 示 。 - 

Android 模拟 器 可 以 仿真 手机 的 绝 大 部 分 硬件 和 软 K s 
件 功 能 ,支持 加 载 SD 卡 映 像 文件 ,更 改 模拟 网 络 状 态 、 
延迟 和 速度 ,模拟 电话 呼叫 和 接收 短信 等 ,支持 将 屏幕 
当成 触摸 屏 使 用 ,可 以 使 用 鼠标 单 击 屏幕 模拟 用 户 对 Android 设备 的 触摸 操纵 。 在 
Android 模拟 器 上 有 普通 手机 常见 的 各 种 按键 ,如 音量 键 、 挂 断 键 `. 返 回 键 和 菜单 键 等 。 
但 Android 模拟 器 仍 不 支持 的 功能 包括 : 接听 真实 电话 呼叫 .USB 连接 .摄像头 捕获 E 
接 状 态 检测 .电池 电量 `AC 电源 检测 SD 卡 插 拔 检查 和 蓝牙 设备 等 。 


252 USB 连 接手 机 


除了 使 用 Android 模拟 器 调试 程序 以 外 ,用 户 也 可 以 使 用 Android 手机 调试 程序 。 
在 进行 手机 调试 前 , 先 要 将 Android 手机 与 App Inventor 连接 在 一 起 ,这 样 在 App 
Inventor 中 开发 的 程序 才 可 以 自动 安装 到 手机 里 面 。 与 手机 连接 的 途径 有 两 种 ,分 别 是 
通过 USB 数据 线 连 接 和 通过 WiFi 网 络 连接 。 

使 用 USB 数据 线 连接 Android 手机 是 一 种 比较 简便 的 方法 ,但 需要 用 户 对 手机 进 
行 一 些 设置 。 

首先 ,进入 “设置 "页面 , 单 击 “ 应 用 程序 ”, 接 着 勾 选 应 用 程序 内 的 “未 知 来 源 ” 选 项 ， 
这 样 可 以 允许 非 谷 歌 应 用 程序 商店 中 的 软件 在 设备 上 运行 。 

在 “设置 "页面 中 进入 “开发 者 选项 ”, 勾 选 其 中 的 “USB 调试 "和 “保持 唤醒 状态 ”这 两 
个 选项 。 勾 选 这 两 个 选项 可 以 保证 在 开发 时 能 够 进入 调试 状态 ,同时 在 充电 模式 下 不 进 
人 人 休 眼 状态 。 


2.23 连接 Android 模拟 器 
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设置 完成 后 用 数据 线 将 手机 与 计算 机 相连 ,然后 进入 App Inventor 模块 编辑 器 , 单 
击 右上 角 的 Connect to Device 下 拉 菜 单 , 如 图 2. 24 所 示 。 用 户 的 Android 设备 型 号 被 
识别 后 出 现在 下 拉 选 框 内 ,选择 该 手机 型 号 即 可 将 手机 与 App Inventor 相连 。 


New emulator Connect to Device... 


Connect to Device... 
| Reset connections 
HT94LLZ00001 
£ 


Æ 2.24 USB 连接 手机 


253 WF 连接 手机 


通过 WiFi 连接 手机 是 App Inventor 推荐 的 连接 方式 ,用 户 只 需要 在 手机 上 下 载 并 
安装 MIT ALCompanion 的 软件 ,就 可 以 让 手机 实时 地 从 App Inventor 中 自动 获取 应 用 
程序 ,简化 调试 过 程 。 

在 Google Play 的 MIT ALCompanion 软件 安装 页 面 中 , 单 击 “ 安 装 ” 按 钮 ,将 该 软件 
下 载 安 装 到 Android 手机 上 ,如 图 2. 25 所 示 。MIT ALCompanion 的 下 载 地 址 为 : 


https: //play. google. com/ store/apps/ details? id=edu. mit. appinventor. aicompanion2 。 


be Google play 


购买 ANDROID 应 用 


我 的 ANDROID 应 用 


MIT AICompanion 
ing 


MIT. ming 


说 明 

App Inventor lets you develop applications for Android phones using a web browser and 

either a connected phone or emulator. The App Inventor servers store your work and help you — 关于 此 应 用 
keep track of your projects. 


The App Inventor Companion lets you see how your App works as you build it. do 
es 


More information is at Http./lappinventor mit edu SUN 
2012125125 


人、 您 没有 任何 设备 。 Note that this application has a lot of permissions because it has to be ableto do any 


operation that you can write apps to do 
查看 此 应 用 的 用 户 还 查看 了: 1 | BS ANI pron 


Æ 2.25 MIT ALCompanion 软件 安装 页 面 


完成 MIT ALCompanion 安装 后 ,在 手机 上 运行 该 软件 ,软件 启动 后 的 界面 如 
图 2. 26 所 示 。 运 行 MIT ALCompanion 前 ,需要 开启 手机 的 WiFi 功能 ,因为 MIT 
ALCompanion 是 通过 无 线 局 域 网 将 数据 从 App Inventor 传递 到 手机 中 。 

启动 手机 上 的 MIT ALCompanion 以 后 ,在 App Inventor 的 模块 编辑 器 中 选择 
Connect to Device 下 拉 菜 单 中 WiFi 选项 ,如 图 2. 27 所 示 。 
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* Wi LET: 


App Inventor Companion 


Your IP Address: 192.168.1.102 bia IBS TS HIE 


Directions: 

[1) On the Blocks Editor, press "Connect to Device" 
and select WiFi. 

[2) Type the 6-letter code or scan the QR code 
displayed on the Blocks Editor. 

[3) Click the 'Connect to App Inventor’ button. 
below. 

4) If not connected in 30 seconds, click reset and 
[repeat steps 1- 


Directions: 
1) On the Blocks Editor, press "Connect to Device" 
land select WiFi. 

2) Type the 6-letter code or scan the QR code 
displayed on the Blocks Editor. 
3) Click the Connect to App Inventor button 
below. 

l4) f not connected in 30 seconds, click reset and 
[repeat steps 1-4. 


Scan the QR Code "says 


Connectto App Inventor qwertyui 


w e [dl d FOB Ú d 


€ zxcvbnm e 


New emulator 


Done Reset connections 


WiFi 


图 2.26 MIT ALCompanion 图 2.27 模块 编辑 器 设备 连接 选项 

计算 机 屏幕 上 会 弹出 一 个 对 话 框 , 上 面 提供 了 一 个 6 位 验证 码 和 二 维 码 , 如 图 2. 28 

所 示 。 用 户 可 以 选择 在 手机 的 MIT ALCompanion 中 输入 验证 码 与 App Inventor 取得 
连接 ,也 可 通过 扫描 二 维 码 来 获取 连接 。 


lo] Waiting for the Companion App [2] 
Instructions: 
. 
.. ' @ Start the App Inventor Companion App on your phone or tablet. 
€ Use the the Companion App to scan the QR code at the left. 
g or 


Enter the code below into the Companion App and press "Connect to App Inventor." 


[n] M Your Code 


qulpve 


2.28 设备 连接 的 验证 码 和 二 维 码 


以 上 是 利用 App Inventor 进行 Android 应 用 软件 开发 的 前 期 准备 工作 ,如 果 用 户 在 
操作 中 遇 到 任何 问题 ,可 以 参考 MIT App Inventor 的 Troubleshooting Page, 其 网 址 为 
http: //appinventor. mit. edu/explore/content/troubleshooting. html/ ,希望 以 上 介绍 能 
够 为 Android 应 用 开发 学 习 者 们 带 来 帮助 。 
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1. 安装 App Inventor 开发 环境 ,并 记录 安装 和 配置 过 程 中 所 遇 到 的 问题 。 
2. 尝试 安装 App Inventor 程序 ,并 分 别 使 用 模拟 器 和 手机 进行 调试 。 
3. 分 析 使 用 WiFi 连接 手机 调试 程序 的 优 缺 点 。 


第 一 个 App Inventor 程序 


本 章 主 要 介绍 开发 App Inventor 应 用 程序 的 基础 知识 和 基本 方法 。 通 过 本 章 内 容 
的 学 习 , 读 者 可 以 了 解 开发 App Inventor 应 用 程序 的 过 程 和 方法 ,进一步 掌握 App 
Inventor 程序 的 界面 开发 方法 和 逻辑 部 分 开发 方法 。 


本 章 学 习 目 标 : 


* 了 解 App Inventor 的 程序 开发 流程 ; 
。 掌握 界面 编辑 器 的 使 用 方法 ; 
° 掌握 模块 编辑 器 的 使 用 方法 。 


31 创建 新 工程 


本 章 将 详细 介绍 如 何 开发 第 一 个 App Inventor 程序 HelloAppInventor, 并 在 第 2 章 
的 基础 上 ,讲解 如 何 使 用 App Inventor 建立 新 工程 .使 用 界面 设计 器 开发 用 户 界 面 、 使 用 


Hello Appinventor 
请 按 我 
Hello!App Inventor 


3.1 HelloAppInventor 示例 界面 


模块 编辑 器 开发 程序 逻辑 ,以 及 使 用 手机 或 模拟 器 进 
行程 序 调试 。 

HelloAppInventor 示例 非常 简单 ,界面 如 图 3. 1 
所 示 ,用 户 在 界面 上 单 击 “请 按 我 ?按钮 , 则 会 在 按钮 下 
Jr HER" Hello! App Inventor", 

进入 App Inventor 后 ,在 My Projects 页 面 中 单 
ili New 按钮 ,新 建 一 个 App Inventor 工程 。 在 弹出 
的 New App Inventor for Android Project 对 话 框 中 ， 
在 Project name 文本 框 中 填 人 新 建 App Inventor T 
程 的 名 称 , 这 里 填 和 人 “HelloAppInventor” 作 为 工程 名 
称 , 然 后 单 击 OK 按钮 完成 工程 创建 ,如 图 3. 2 所 示 。 

工程 创建 完成 后 ,Projects 中 会 显示 刚刚 创建 的 
工程 ,如 图 3.3 所 示 。 工 程 名 称 HelloAppInventor 前 


面 有 一 个 复 选 框 ,作用 是 进行 批量 删除 操作 ,如果 选择 这 个 复 选 框 ,Delete 按钮 就 会 变 为 


可 单 击 的 状态 。 
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Project name: HelloAppInventor| 


图 3.2 App Inventor 工程 项 目的 创建 


Date Created 
2013 Mar 16 00:14:50 


图 3.3 App Inventor 工程 列表 
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单 击 新 创建 的 工程 名 称 HelloAppInventor. App Inventor 会 打开 界面 设计 器 页 面 ， 
如 图 3.4 所 示 。 这 样 , 用 户 就 可 以 开始 进行 HelloAppInventor 的 界面 设计 。 


HelloApplnventor [ Save | Save as cheapont | [Pacage tor Phone ° | 
Basic Ds 
Ei PEET 
国 sua @ [et [a] 
国 Camas @ venical 
MÀ Cheer o EN 
Gackorounacalor 
8 cox o D wwe 
国 mae © Pactgrounamage 
p o None... 
CloseSreenAnimaton. 
Bom m Defeat 
Ed Passworareapox 加 
WD resar © None ] 
Tmoe pensaeennimalion 
x 9 [Desmit [e 
Media ScreenOnentaton 
[Unssecified 
Animation 
Socal E 
Te 
peus Screenl | 
Screen Arrangement 
LEGO® MINDSTORMS® i | 
Othar stuft VersonName 
10 
Not ready for prime time. | 


3.4 HelloAppInventor 示例 的 界面 设计 器 
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App Inventor 会 自动 创建 一 个 屏幕 页 Screen1( Android 
系统 中 的 Activity) ,可 以 在 模块 区 (Components) 中 看 到 屏 
幕 页 Screen1。 屏 幕 页 是 界面 控件 的 承载 体 , 供 用 户 在 其 
上 面 摆 放 各 种 界面 控件 。 

在 属性 设置 区 (Properties) 中 ,将 Screenl 屏幕 页 的 
标题 (Title) 属 性 从 “Screen1” 更 改 为 “Hello AppInventor”， 
设计 区 (Viewer) 中 HelloAppInventor 示例 的 标题 也 会 
立即 更 改 为 “Hello AppInventor”, 如 图 3. 5 所 示 。 

接 下 来 第 二 步 是 从 左 侧 的 控件 库 (Palette) 的 Basic 
区 域 中 ,将 按钮 (Button) 控 件 拖 中 到 屏幕 页 Screenl 上 。 
屏幕 页 上 立即 会 出 现 一 个 按钮 ,显示 的 内 容 是 默认 字符 
tB" Text for Button1”, 如 图 3. 6 所 示 。 图 3.5 HelloApplnventor 

此 时 模块 区 中 也 会 出 现 刚刚 放置 的 按钮 控件 ,如 示例 的 标题 
图 3.7 所 示 ,默认 的 名 称 为 “Button1”。 这 是 一 个 较为 简 
便 的 命名 方式 , 用户 使 用 的 第 一 个 按钮 就 命名 为 “Button1”, 第 二 个 按钮 就 命名 为 
“Button2”, 以 此 类 推 。 如 果 界 面 上 的 控件 较 少 , 这 样 的 命名 方式 也 未 尝 不 可 ,但 如 果 界 
面 较为 复杂 ,建议 给 这 些 控 件 重 新 命名 ,在 后 面 的 逻辑 设计 中 ,可 以 方便 地 知道 这 些 控件 
在 界面 上 是 做 什么 用 的 。 例 如 ,Buttonl 按钮 ,就 可 以 重新 命名 为 “ButtonClickMe” 或 是 


“button_click_me” 等 。 


ed FontTypetace 
default m] 
Image 
国 suton @ None... 
Ja Canvas @ Shape 
default 
Ë CheckBox @ 
Text 
fj Clock o 
Text for Buttonl 
国 mage @ 
[A] Label @ TextAlignment 
center 
B] ListPicker [0] 
TexiColor 
国 PasswordTexiBoxk — (9 E" x" 
TextBox @ 
= Q Visible 
MEE e Upload new. [shorinz EB] 


3.6 i68 — E SH 3.7 Buttonl 按钮 模块 和 属性 
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下 面 修改 属性 设 定 区 中 Buttonl 按钮 的 属性 ,所 有 的 修改 内 容 如 表 3. 1 所 示 。 修 改 
Buttonl 按钮 属性 的 目的 是 让 按钮 看 起 来 更 加 醒目 , 且 可 以 显示 中 文 提示 “请 按 我 ,使 用 
者 就 可 以 轻易 地 判读 出 这 个 控件 是 一 个 按钮 。 


表 3.1 Buttonl 按钮 属性 


属 性 默认 值 修改 值 属 性 默认 值 修改 值 
BackgroundColor | Default Green Text Text for Buttonl | 请 按 我 
FontSize 14.0 30 Width Automatic Fill parent 


如 图 3. 8 所 示 ,首先 将 按钮 的 背景 颜色 修改 为 绿色 ,修改 方法 是 将 BackgroundColor 
属性 由 默认 的 “Default? 改 为 “Green”。 修 改 背景 颜色 时 会 弹出 颜色 板 , 直 接 选择 绿色 就 
可 以 了 。 修 改 Buttonl 按钮 的 字体 大 小 是 通过 修改 FontSize 属性 实现 的 ,FontSize 属性 
的 默认 值 是 “14. 0" ,将 其 修改 为 “30? 即 可 。Text 属性 是 控制 按钮 的 显示 内 容 , 将 其 从 默 
认 的 “Text for Button1? 改 为 “请 按 我 ”。 
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3.8 Buttonl 按钮 属性 修改 


Width 属性 是 控制 按钮 宽度 的 属性 ,默认 值 是 Automatic, 表 示 按 钮 的 宽度 会 自 适应 
文字 的 长 度 。 另 一 种 设置 方法 是 Fill parent, 这 样 的 设置 方法 ,按钮 的 宽度 会 填充 满 整个 
父 控件 ,Buttonl 就 采用 这 种 设置 方法 。 最 后 一 种 设置 方法 是 将 宽度 设置 为 固定 的 值 , 这 
里 用 像素 作为 单位 。 

Buttonl 控件 的 属性 设置 完成 后 ,设计 区 中 生成 的 HelloApplnventor 界面 如 图 3. 9 
所 示 。 因 为 按钮 宽度 属性 设置 为 Fill parent, 按 钮 的 宽度 达到 了 最 大 值 。 

第 三 步 是 从 控件 库 的 Basic 组 件 区 中 ,将 一 个 标签 (Label) 控 件 拖 忠 到 屏幕 页 中 , 标 
签 控 件 一 般 用 来 显示 文字 。 标 签 控 件 被 拖 忠 到 屏幕 页 后 ,会 自动 出 现在 前 一 个 控件 的 下 
Jr. fE HelloAppInventor 示例 中 ,标签 控件 会 出 现在 Buttonl 按钮 下 方 ,显示 的 文字 为 
Text for Labell ,如 图 3. 10 所 示 。 
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TANI € s:o9 PM VARI € 5:09PM 
WER HER | 
'ext for Labell 
图 3.9 设计 区 中 的 HelloAppInventor 界面 3.10 添加 标签 后 的 界面 


因为 这 是 界面 中 的 第 一 个 标签 ,因此 标签 的 名 称 为 Labell 。Labell 标签 的 默认 属性 
如 图 3. 11 所 示 。 
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3.11 Labell 的 属性 


下 面 需要 修改 Labell 标签 的 字号 .显示 文字 和 宽度 ,按照 表 3. 2 修改 Labell 标签 的 
属性 。 

在 Labell 标签 属性 修改 完毕 后 ,Labell 标签 因为 Text 属性 为 空 ,因此 在 界面 上 
Labell 标签 已 经 不 可 见 ,但 它 还 是 确实 存在 的 ,如 图 3. 12 所 示 。 


33.2 Labell 属性 
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属性 默认 值 修改 值 
FontSize 14.0 30 
Text Text for Labell 
Width Automatic Fill parent 


图 3.12 Labell 标签 属性 修改 后 的 界面 


至 此 ,HelloAppInventor 示例 的 界面 设计 部 分 已 经 完成 了 , 单 击 Save 按钮 保存 界面 
设计 。 最 后 , 单 击 Open the Blocks Editor 按钮 ,打开 模块 编辑 器 ,准备 进行 程序 逻辑 的 


设计 。 


33 逻辑 模块 开发 


新 工程 打开 的 模块 编辑 器 (Blocks Editor) 如 图 3. 13 所 示 。 ed 


工程 名 称 和 屏幕 页 名 称 “ 


HelloAppInventor-Screen1”, 表示 这 个 模块 编辑 器 是 


HelloAppInventor 示例 的 Screenl 屏幕 页 的 模块 编辑 器 。 


Control 


Built February 21 2013 Version: vi33 


3.13 ”模块 编辑 器 
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在 HelloAppInventor 示例 中 ,要 实现 的 逻辑 可 以 这 么 描述 : 在 单 击 * 请 按 我 ?按钮 
后 ,标签 显示 文字 “Hello! App Inventor", 

上 面 的 这 段 逻 辑 描述 中 ,可 以 找到 三 个 关键 的 元 素 :“ 请 按 我 "按钮 .标签 和 文字 
“Hello! App Inventor”; 两 个 关键 动作 :“ 单 击 ”* 和 “显示 ”。“ 单 击 ” 动 作对 应 “请 按 我 ” 按 
钮 控件 ,而 “显示 ”动作 对 应 标签 控件 。 

如 果 这 样 分 析 , 只 要 在 模块 编辑 器 中 找到 : 按钮 的 单 击 、 显 示 标 签 内 容 和 内 容 的 承载 
Mk ,就 可 以 完成 上 述 逻 辑 。 而 事实 上 ,这 样 的 模块 在 模块 编辑 器 中 可 以 很 容易 找到 ,如 
图 3. 14 所 示 。 


when Buttont.Click. 
=! Labelt.Text n +a | 
图 3.14  HelloAppInventor 示例 所 需 的 模块 


下 面 来 说 明 如 何在 模块 编辑 器 的 模块 编辑 库 中 ,找到 程序 逻辑 设计 所 需要 的 模块 。 
在 模块 编辑 库 中 分 为 Built-In、My Blocks 和 Advanced 三 个 子 项 ,如 图 3. 15 所 示 。 


4] [Buitin FMg Blogs] Advanced | | Buit-in 1 mcs 
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Buttont Any Label 
ji Labell Any Screen 


Control 
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3.15 模块 编辑 库 


Built-In 是 内 建 模块 ,经 常 使 用 到 的 模块 被 保存 在 这 里 ,包括 字符 串 模 块 、 列 表 模 块 、 
逻辑 模块 .控制 模块 和 颜色 模块 ,以 及 用 来 建立 可 复 用 程序 的 函数 模块 。 

My Blocks 是 用 户 界面 中 控件 的 事件 模块 和 方法 模块 ,这 里 的 模块 类 型 和 数量 会 根 
据 用 户 界面 中 所 包含 的 控件 数量 变化 。 

Advanced 是 高 级 模块 ,基本 上 是 对 所 有 同类 型 控件 的 操控 ,例如 全 部 按钮 .全 部 标 
签 或 是 全 部 屏幕 页 。 

回想 一 下 刚才 对 逻辑 的 描述 : 在 “请 按 我 "按钮 被 单 击 后 ,标签 显示 文字 “Hellol 
App Inventor”。“ 请 按 我 ”按钮 的 名 称 是 Buttonl ,这 样 首先 找到 第 一 个 模块 :“Buttonl 
的 点 击 ”。 

第 一 个 模块 可 以 按照 如 下 方式 找到 : My Blocks- Buttonl — Buttonl. Click, 如 图 3. 16 
所 示 。 用 户 只 需要 单 击 My Blocks ,然后 单 击 Buttonl ,最 后 将 Buttonl. Click 拖 忠 到 右 侧 
的 设计 区 中 即 可 。 

准确 地 讲 ,Button1. Click 模块 是 按钮 的 单 击 事件 ,这 个 模块 会 在 按钮 被 单 击 的 时 候 
调用 。 除 了 按钮 的 单 击 事件 以 外 ,在 图 3. 16 中 ,还 可 以 找到 按钮 的 获取 焦点 事件 .长 时 
间 单 击 事件 和 失去 焦点 事件 。 


Screen1 


图 3.16 获取 Buttoni. Click 模块 


第 二 个 模块 可 以 按照 如 下 方式 找到 : My Blocks—>Labell— Labell. Text, 如 图 3. 17 
Bir zs ,获取 方法 与 获取 Buttonl. Click 模块 的 方法 相似 。Labell. Text 模块 是 一 个 方法 ， 
表示 将 Labell 的 显示 内 容 进行 更 改 。 
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3.17 获取 Labell. Text 模块 


第 三 个 模块 是 text 模块 ,用 来 表示 需要 显示 的 字符 串 ,获取 该 模块 的 方法 如 下 : 
Built-in> Text >text, WB] 3. 18 所 示 。 

text 模块 的 默认 显示 内 容 为 “text”, 将 其 内 容 修改 为 “Hello! App Inventor”, H 
只 要 单 击 text 模块 的 文字 部 分 ,就 可 以 进行 修改 ,如 图 3. 19 所 示 。 

在 获取 到 所 有 需要 的 模块 后 ,要 将 这 些 模块 按照 逻辑 关系 组 装 在 一 起 ,其 过 程 就 像 
拼图 游戏 ,拼装 过 程 如 图 3. 20 所 示 。 

在 拼装 过 程 中 不 难 发 现 ,Buttonl. Click 模块 和 Labell. Text 模块 的 卡 槽 是 互相 吻合 
的 ,这 样 的 模块 是 可 以 拼装 在 一 起 的 ,同样 Labell. Text 模块 和 text 模块 的 卡 槽 也 是 互 
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图 3.18 获取 text 模块 
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图 3.19 修改 text 模块 参数 


when Button1.Click 
do 
i when Buttoni.Click 
do [set to (2 tet 
Label1.Text Hello! Inventor 
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3.20 模块 拼装 


相 吻 合 的。 相反 ,Buttonl. Click 模块 和 text 模块 的 卡 槽 并 不 匹配 , 则 这 两 个 模块 无 法 拼 
装 在 一 起 。 

App Inventor 中 ,如 果 两 个 模块 成 功 地 拼装 在 一 起 ,将 会 发 出 清脆 的 “ 味 ” 的 声音 ， 
且 两 个 模块 的 边缘 是 完全 咬合 在 一 起 的 。 反 之 ,如 果 两 个 模块 无 法 拼装 , 则 不 会 有 任何 


反应 。 
拼装 完成 后 ,应 单 击 屏幕 左上 角 的 Saved 按钮 ,保存 已 经 编辑 好 的 程序 逻辑 。 


34 程序 调和 起 


App Inventor 支持 模拟 器 调试 和 手机 设备 调试 ,如 果 条 件 允 许 , 尽 量 选择 手机 设备 
进行 调试 。 因 为 模拟 器 在 响应 速度 、 显 示 效 果 和 对 硬件 支持 方面 存在 一 定 的 不 足 , 且 使 
用 手机 调试 完毕 后 ,开发 者 可 以 将 程序 安装 在 手机 中 ,与 朋友 和 家 人 分 享 。 
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如 何 使 用 模拟 器 和 手机 进行 调试 的 相关 内 容 , 可 以 参考 第 2. 5 节 。 笔 者 采用 USB 
连接 手机 的 方式 进行 调试 ,这 种 方式 无 须 无 线 网 络 ,而 且 不 需要 输入 验证 码 , 似 乎 更 加 易 
H= 


New emulator — ||Connectto Device = | 
USB 数据 线 将 手机 连接 到 所 使 用 的 计算 机 上 后 ， [= Resetconnectons 8 
单 击 模块 编辑 器 右上 方 的 Connect to Device 按钮 ,在 


下 拉 菜 单 中 选择 手机 的 串 号 ,本 实例 中 手机 设备 的 串 图 3.21 通过 USB 连接 手机 设备 
号 显示 为 "?”, 如 图 3. 21 所 示 。 
App Inventor 通过 USB 与 手机 设备 , 当 Connect to Device 按钮 右 侧 的 电话 图 标 由 
闪 动 的 黄色 变 为 静态 的 绿色 时 ,表示 程序 与 手机 设备 完成 连接 ,此 时 手机 设备 屏幕 显示 
手机 “正在 等 待 App Inventor 命令 ,应 用 程序 即将 显示 ”, 如 图 3. 22 所 示 。 
片刻 后 手机 屏幕 显示 HelloAppInventor 示例 的 界面 , 单 击 “ 请 按 我 ”按钮 后 ,将 在 按 
钮 下 方 显示 “Hello! App Inventor” 字 样 ,如 图 3. 23 所 示 。 


il & 


Hello Appinventor 
请 按 我 
HellolApp Inventor 


Hello Appinventor. 
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Listening to App Inventor 
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图 3.22 程序 连接 完成 等 候 页 面 Æ 3.23 HelloApplnventor 示例 的 运行 结果 
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1. 使 用 App Inventor 开发 应 用 程序 ,界面 编辑 器 和 模块 编辑 器 的 功能 各 是 什么 ? 

2. 分 析 哪 种 程序 调试 方法 更 加 适合 你 ? 为 什么 ? 

3. 尝试 将 HelloAppInventor 示例 的 源 代码 apk 文件 下 载 到 本 地 电脑 ,并 想 办 法 将 
apk 文件 安装 在 手机 上 。 


: 
| 
J 
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程序 设计 基础 


在 程序 设计 过 程 中 ,不 可 避免 地 会 使 用 到 条 件 判断 、 循 环 、 函 数列 表 和 事件 处 理 等 
控制 执行 顺序 的 模块 。 通 过 本 章 内 容 的 学 习 , 读 者 可 以 基本 掌握 这 些 模 块 的 使 用 方法 和 
场景 。 

本 章 学 习 目标 

。 掌握 条 件 判 断 模块 的 使 用 方法 ; 

° 了 解 布 尔 表 达 式 ; 

。 掌握 列表 的 使 用 方法 ,以 及 列表 的 分 类 和 区 别 ; 

。 掌握 循环 模块 的 使 用 方法 ; 

° 掌握 函数 模块 的 使 用 方法 ,以 及 函数 的 参数 和 返回 值 ; 

° 了 解 控件 的 事件 、 属 性 和 方法 的 区 别 。 


41 程序 设计 的 基本 结构 


在 App Inventor 的 开发 环境 中 ,程序 设计 的 逻辑 部 分 主要 体现 在 模块 编辑 器 
(Blocks Editor) 的 设计 环节 中 ,是 将 选 定 的 模块 通过 判断 .循环 、` 函 数 . 列 表 和 事件 处 理 等 
程序 结构 拼接 成 完整 的 .正确 的 可 执行 程序 。 

在 模块 编辑 器 中 ,判断 、 循 环 、 函 数列 表 和 事件 处 理 等 程序 结构 同样 是 以 模块 的 形 
式 给 出 的 ,用 户 选 择 所 需 的 结构 模块 ,并 将 这 些 模块 与 组 件 模块 相互 拼接 ,最 终 实现 完整 
的 程序 逻辑 。 其 中 ,判断 、 循 环 、 函 数 、 列 表 和 事件 处 理 等 类 型 的 程序 结构 模块 ,在 模块 编 
辑 器 中 模块 集 的 Built-In 中 ,并 按照 不 同 的 分 类 将 其 分 配 在 Definition, Text, Lists, 
Math、Logic 和 Control 等 分 支 中 。 


42 和 条件 和 判断 


在 生活 中 经 常会 遇 到 下 面 这 些 说 法 :“ 如 果 明 天 天 气 好 ,我 们 就 去 郊游 ;如 果 天 气 不 
好 ,就 不 去 了 ”,“ 如 果 成 绩 能 到 90 分 ,就 会 奖励 你 ; 当然 如 果 成 绩 还 没有 达到 60 分 ,就 会 
批评 你 ”。 这 些 说 法 中 的 “如 果 …… ”就 是 条 件 判断 .“ 如 果 ” 后 面 描述 的 事情 称 为 “条 
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件 ”, 所 以 这 样 的 句子 经 常 的 形式 为 “如 果 十 条 件 , 条 件 成 立时 可 以 做 的 事情 ”。 
在 程序 设计 中 ,为 了 处 理 各 种 可 能 发 生 的 情况 ,App Inventor 提供 了 两 种 条 件 判断 


模块 : if 模块 和 ifelse 模块 ,如 图 4.1 所 示 。 


这 两 种 条 件 判 断 模块 虽然 起 到 条 件 分 支 的 作用 ,但 二 者 的 具体 使 用 情景 却 不 相同 ， 


后 面 的 内 容 将 对 两 个 条 件 判 断 模块 分 别 进行 介绍 。 


if test r. 
Definition | e 
Text —— 
P Lists ifelse test r 
if pem P ifelse test r Wm SN 
then-do mondo et dd A 
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D = else-do Control 
e: 
Colors 


图 4.1 条 件 判断 模块 


421 if 模 块 


4.2 模块 编辑 器 中 的 让 模块 


在 模块 编辑 器 中 ,if 模块 的 位 置 在 Built-In>Control>if, WK] 4. 2 所 示 。 
站 模块 结构 和 执行 流程 如 图 4. 3 所 示 , 其 中 槽 test 用 来 拼接 条 件 , 槽 then-do 用 来 拼 


接 需 要 执行 的 动作 。 


计 模 块 的 执行 流程 是 先 判断 模 test 的 条 件 是 否 为 true, 也 就 是 说 条 件 是 否 成 立 ,如 果 


条 件 成 立 , 则 执行 槽 then-do 中 的 其 他 模块 ;如 果 条 件 为 false( 条 件 不 成 立 ), 则 不 执行 模 
then-do 中 的 其 他 模块 。 下 面 给 出 一 个 小 示例 说 明 如 何 使 用 计 模 块 。 


在 这 个 示例 中 ,程序 结构 中 只 包含 一 个 和 模块 ,如 图 4.4 所 示 。 条 件 是 “成 绩 小 于 等 


于 60 4Y" RFH " score — 60", score 是 一 个 全 局 变量 ,在 这 里 代表 成 绩 分 数 。 如 果 


score 小 于 等 于 60, 返 回 true,if 模块 将 执行 then-do 中 的 内 容 , 将 Labell 标签 的 显示 内 
容 修改 为 "failed”。 反 之 ,如 果 条 件 不 成 立 , 则 返回 false,if 模块 跳 过 then-do 中 的 内 容 。 
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4.3 证 模块 与 执行 流程 


422 布尔 表达 式 


4.4 证 模块 示例 


4.2.1 节 中 经 常 提 到 拼接 在 模 test 上 的 “条 件 ”, 实 际 上 是 一 种 布尔 表达 式 , 最 终 只 有 


true( 真 ) 和 false( 假 ) 两 个 取 值 。 
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最 简单 的 布尔 表达 式 是 等 式 (equality) ,这 种 布尔 
表达 式 用 来 测试 一 个 值 是 否 与 另 一 个 值 相同 。 它 可 以 "SO 
是 一 个 简单 的 等 式 , 例 如 2==4, 也 可 以 是 一 个 复杂 一 些 。, 馈 
的 等 式 ,例如 score 王 60, 如 图 4.5 所 示 。 . score |- d] 
App Inventor 支持 的 关系 运算 符 有 小 于 (二 ) .小 于 等 4.5 等 式 
于 (<<=) ,等 于 (==)、 大 于 (二 )、 大 于 等 于 (二 ==) ,不 等 于 
(not=) WE 4. 6 所 示 。 使 用 这 些 关系 运算 符 就 可 以 做 出 一 些 较为 复杂 的 条 件 判 断 。 
App Inventor 支持 的 逻辑 运算 符 有 真 (true) | [Bt (false) .与 (and) ,或 (or) 和 非 (not)， 
如 图 4.7 所 示 。 
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Bl 4.6 App Inventor 支持 的 关系 运算 符 4.7 App Inventor 支持 的 逻辑 运算 符 


通过 使 用 关系 运算 符 和 逻辑 运算 符 , 可 以 表达 稍微 复杂 一 些 的 判断 条 件 , 例 如 图 4.8 
的 “高 危 工种 的 招聘 条 件 是 : 考试 分 数 大 于 等 于 60 分 ,年 龄 小 于 等 于 28 岁 ,初级 工作 在 
5 年 以 上 或 高 级 工作 在 2 年 以 上 ,而 且 必 须 是 未 婚 ”。 使 用 到 了 逮 辑 运算 符 and, or 和 
not, 以 及 像 大 于 、 小 于 等 的 一 些 关系 运算 符 。 

除 此 之 外 ,还 有 一 些 判断 模块 返回 的 值 同 样 是 布尔 类 型 的 ,这 些 模 块 也 可 以 作为 布 
尔 表 达 式 拼接 在 计 模 块 的 槽 test 上 ,如 图 4.9 所 示 。 通 过 观察 ,这 些 模块 有 一 个 共同 的 
特点 ,都 是 “is…?? 的 形式 ,所 以 读者 也 可 以 较为 容易 地 在 众多 的 模块 中 将 其 辨认 出 来 。 


call thing r: NN I thing r 
is in list? itf — isalist? | 


text (^ 


all thii 
Keanu "a Hinnen “l 


图 4.8 复杂 的 条 件 判 断 图 4.9 可 用 于 条 件 判断 的 模块 
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ifelse 模块 的 结构 与 让 模块 相似 , 槽 test 用 来 拼接 条 件 , 槽 then-do 用 来 拼接 需要 执 
行 的 动作 。 不 同 之 处 在 于 多 了 一 个 槽 (else-do) ,可 以 执行 一 些 条 件 不 成 立时 的 操作 。 

ifelse 模块 的 执行 流程 是 先 判 断 槽 test 的 条 件 是 否 为 true( 条 件 成 立 ) ,如 果 条 件 成 
立 , 则 去 执行 槽 then-do 中 的 模块 ;如 果 条 件 为 false( 条 件 不 成 立 ) , 则 执行 else-do 中 的 模 
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块 。ifelse 模块 与 执行 流程 如 图 4. 10 所 示 。 
ifelse 模块 给 出 一 个 与 让 模块 相似 的 示例 ,不 同 之 处 是 “当成 绩 大 于 60 分 时 ,显示 考 
试 成 功 的 提示 信息 ”, 如 图 4.11 所 示 。 


event2 | 站 | Q 
一 二 else test C J J 
global number 
h Score |= 0 60 | | 


A then-do 
z I set 
ifelse test Ë 


to 
ifelse condition Label1.Text 
then-do y x 
true false else-do P 


text 
failed 


to | text 
i then-do else-do Lebel Text succe” 


B1 B2 


F 


图 4. 10 ifelse 模块 与 执行 流程 图 4.11 ifelse 模块 示例 


ifelse 模块 示例 首先 判断 模 test 的 条 件 “score 所 一 60? 是 否 成 立 , 如 果 条 件 成 立 , 则 执 
行 then-do 中 的 内 容 , 将 Labell 标签 的 显示 内 容 修 改 为 failed。 如 果 条 件 不 成 立 , 则 执行 
else-do 中 的 内 容 , 将 Labell 标签 的 显示 内 容 修改 为 succeed。 
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让 模块 和 ifelse E E nT DJ PR qh fd FI . tn] DL i £S RE FH S HER hay 3c T Bi 
个 时 , 则 可 在 条 件 模块 的 then-do 分 支 或 else-do SAPRE if 模块 或 ifelse 模块 ,以 实现 
多 分 支 的 情况 。 

下 面 用 一 个 小 例子 说 明 如 何 使 用 条 件 符 套 。 给 出 一 个 变量 x,x 可 能 的 值 只 有 1,2 
A 3.43 x Jg 1. ZR" x— 17: WR x 为 2, 显 示 “x 二 2”; 如 果 x 为 3, 显示 “x 二 3”; 如 果 
x 为 其 他 值 , 则 显示 error。 在 图 4. 12 中 ,实现 了 这 个 例子 的 4 条 条 件 分 支 ,使 用 了 ifelse 模 
e e cs 


ES KH " 2 gend number | 


then-do (—>— 
set 


text 
Label1.Text x=1 


then-do (777 


else-do (^ 


text 
E een. Text x=2 


else-do | ~~ 
ifelse test 


else-do 


Set 


toí text 
Label1.Text error 


4.12 ifelse HHBE 
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复杂 度 的 条 件 判 断 。 但 在 使 用 条 件 徐 套 结 构 时 ,要 仔细 分 析 程 序 的 各 分 支 情况 ,以 免 造 
成 结构 的 混乱 。 

在 程序 设计 中 ,经 常会 遇 到 同时 使 用 条 
件 坐 套 和 多 条 件 判 断 的 情况 。 多 条 件 判 断 是 
在 使 用 让 模块 或 ifelse 模块 时 ,在 槽 test 中 
拼接 多 个 条 件 ,对 多 个 条 件 进行 综合 判断 , 才 
能 够 返回 一 个 最 终 的 结果 。 

多 条 件 判 断 一般 要 使 用 逻辑 运算 符 and 
或 or。 在 需要 多 个 条 件 同 时 成 立时 ,使 用 逻 
辑 运算 符 and。 如 果 仅 需要 多 个 条 件 中 ,至 
少 其 中 一 个 条 件 成 立时 ,使 用 逻辑 运算 
符 or。 

下 面 介 绍 一 个 小 示例 ,用 以 说 明 如 何 使 
用 多 条 件 判断 和 条 件 租 套 , 如 图 4. 13 所 示 。 

图 4.13 多 条 件 判 断 和 条 件 获 套 示例 在 这 个 示例 中 ,通过 判断 score 的 值 ,确定 成 

绩 的 类 型 : score 的 值 在 90 一 100 之 间 ,成 绩 

类 型 为 Excellent; 在 80—90 之 间 ,成 绩 类 型 为 Good; fE 60—80 Z l] ,成 绩 类 型 为 Fair; 
在 0—60 之 间 ,成 绩 类 型 为 Poor。 

该 示例 很 好 地 呈现 了 多 条 件 判 断 与 条 件 散 套 相 结合 的 程序 结构 ,表面 上 程序 中 的 条 
件 扔 套 重重 ,但 仔细 分 析 其 结构 后 ,会 发 现 该 程序 脉络 清晰 ,易于 理解 。 
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在 程序 设计 过 程 中 ,数据 是 要 处 理 的 对 象 , 也 是 需要 展示 的 部 分 。 程 序 中 的 数据 是 
多 样 化 的 ,数据 的 结构 也 比较 复杂 ,为 了 处 理 这 些 复杂 的 数据 结构 ,App Inventor 提供 了 
“列表 ?来 处 理 像 电 话 册 ,购物 清单 这 样 的 数据 ,并 提供 了 关于 列表 的 操作 模块 ,如 列表 创 
建 模块 ,列表 项 添加 模块 和 列表 项 选择 模块 。 

列表 是 将 数据 按照 特定 顺序 进行 排列 的 一 种 数据 结构 。 列 表 中 的 每 一 个 数据 都 有 
位 置信 息 , 称 为 索引 ,用 户 可 以 根据 索引 找到 列表 中 与 之 对 应 的 数据 。 

严格 地 讲 ,App Inventor 所 有 建立 的 列表 都 是 动态 的 ,也 就 是 说 ,列表 在 建立 后 随时 
可 以 向 列表 中 添加 或 删除 数据 。 为 了 表述 清晰 ,本 书 将 App Inventor 的 列表 分 为 静态 列 
表 和 动态 列表 。 静 态 列表 在 初始 化 时 添加 数据 ,在 程序 运行 期 间 不 做 任何 修改 。 动 态 列 
表 在 初始 化 时 不 添加 数据 ,而 是 在 程序 运行 期 间 动 态 地 添加 或 删除 数据 。 
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列表 一 般 都 保存 在 一 个 变量 中 ,所 以 在 介绍 列表 的 建立 方法 前 , 先 来 说 明 一 下 如 何 


创建 变量 。 
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创建 变量 需要 使 用 variable 模块 ,建立 用 来 保存 列表 的 全 局 变量 ,可 以 通过 选择 
Built-In>Definition— variable 找到 variable 模块 ,如 图 4. 14 所 示 。 

然后 ,将 variable 模块 拖 蝶 到 模块 编辑 器 中 。 因 为 variable 模块 的 名 称 不 能 够 重复 ， 
且 应 具有 明确 的 含义 ,因此 下 一 步 为 列表 变量 修改 名 称 。 将 variable 模块 的 名 称 
variable 改 为 phhonenumbers, 如 图 4. 15 所 示 。 


uilt-In. locks Advanced n" m ar 
Definition T 
Text TIN 
———— 
Lists 1 - T 
Math do 
Logic 
def. 
Corel Sw =C 
Cols 7.77" name | 
def as def as 
i " mm "5— 


图 4.14 模块 编辑 器 中 的 variable 模块 图 4.15 修改 variable 模块 名 称 


接 下 来 ,选择 类 表 创 建 模 块 make a list, 方 法 是 执行 Built-In Lists make a list X 


单 命令 ,如 图 4.16 所 示 。 
然后 将 make a list 模块 与 variable 模块 (phonenumbers 变量 ) 拼 接 在 一 起 ,表示 


phonenumbers 变量 是 一 个 列表 变量 ,如 图 4.17 所 示 。 


Definition 


Text 
Lists 
Math 


P| 
- un 
m as (ca mam | 
n J 
ontrol phonenumbers item 


Colors L 


4.16 模块 编辑 器 中 make a list 模块 4.17 列表 变量 创建 完成 


只 调用 make a list 模块 ,而 没有 在 槽 item 中 添加 任何 元 素 , 则 只 是 创建 了 一 个 空 列 
表 , 如 图 4. 18 所 示 。 

静态 列表 一 般 在 调用 make a list 模块 进行 初始 化 的 时 候 添 加 元 素 , 这 样 只 要 在 覃 
item 中 添加 需要 的 信息 即 可 。 这 里 将 文本 “1010101” 和 “2020202” 拼 接 到 村 item 上 ,如 
图 4. 19 所 示 。 随 着 向 槽 item 拼接 的 元 素数 量 的 增加 , 槽 item 的 数量 总 会 比 元 素 的 数量 
多 1 个 ,这 样 总 是 有 一 个 空 着 的 槽 item 可 以 拼接 下 一 个 列表 元 素 。 


B as |_ call make a list 
item | text 
G 1010101 
item ( text 


2020202" 


honenumbers 
^, call make a list n 
žem item (` 
\ 


4.18 make a list 模块 4.19 列表 数据 填充 
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此 时 的 phonenumbers 列表 则 包含 两 个 元 素 ,索引 为 1 的 元 素 是 文本 “1010101”, 索 引 为 
2 的 元 素 是 文本 “2020202”。 需 要 注意 的 是 ,App Inventor 的 列表 索引 是 从 1 开始 的 。 
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4.3.1 节 定 义 了 列表 变量 phonenumbers, 这 样 就 可 以 在 需要 使 用 时 随时 找到 这 个 列 
表 。 在 需要 对 列表 进行 操作 时 ,只 要 找到 调用 包含 该 列表 的 全 局 变量 即 可 。 

对 列表 最 常用 的 操作 就 是 获取 列表 项 ,一 般 获 取 列 表 项 是 通过 索引 实现 的 。 在 4.3.1 
节 的 列表 phonenumber 中 ,包含 两 个 文本 元 素 "10101012 和 ”2020202”, 下 面 将 说 明 如 何 
通过 使 用 select list item 模块 ,获取 列表 phonenumber 中 索引 为 2 的 元 素 “2020202”。 

首先 从 Built-In>Lists>select list item 路 径 中 找到 select list item 模块 ,如 图 4. 20 所 示 。 

select list item 模块 中 的 参数 槽 有 两 个 ,分 别 是 list 和 index, 如 图 4. 21 所 示 。 醒 list 用 
来 定义 被 操作 的 目标 列表 , 槽 index 用 来 定义 索引 编号 。 


eall make a list. 
Definition (SAN 
(0o 


Text sat wf 
Lists selectiistitem nuex (| 
a= 
Math 3 =p 
E: ETC 0008 T cal list (^ 
Control weiacenert z j 
select list item index f 
Colors call ia P 
4.20 模块 编辑 器 中 select list item 模块 4.21 select list item 模块 


将 列表 变量 phonenumbers 拼接 在 槽 list 上 ,将 数字 2 DHE index 上 ,如 图 4. 22 
所 示 。 在 phonenumbers 列表 中 ,获取 索引 号 为 2 的 元 素 。select list item 模块 运行 后 的 
返回 值 是 文本 “2020202”。 


call list global 
M ü honenumbers 
select list item index (^ number 
2 


4.22 获取 phonenumbers 列表 索引 号 为 2 的 元 素 
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前 面 介 绍 了 获得 列表 中 某 一 元 素 的 方法 ,但 在 实际 应 用 中 ,对 列表 所 有 元 素 的 操作 
却 经 常 被 使 用 到 ,例如 ,显示 列表 中 所 有 的 元 素 、 在 列表 中 找到 最 小 的 元 素 、. 累 加 列表 中 
所 有 的 元 素 等 。 

App Inventor 一 般 利用 列表 的 索引 对 列表 中 所 有 元 素 进行 遍历 。 具 体 的 实现 方法 
是 先 自 定义 变量 index 表示 列表 索引 ,并 将 变量 index 的 初始 值 设 为 1, 如 图 4. 23 所 示 。 

创建 索引 变量 后 , 便 可 根据 索引 变量 index 找到 列表 的 数据 项 , 若 将 索引 变量 初始 值 
设 为 1, 并 递增 索引 变量 ,就 可 以 依次 找到 列表 的 第 一 项 .第 二 项 .第 三 项 …… ,从 而 实现 
了 对 列表 的 遍历 。 
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4.23 初始 化 列表 索引 变量 index 


选择 phonenumbers 列表 下 一 项 的 模块 结构 如 图 4. 24 所 示 。 


Set global to 
global number 
index C index | * 0 1 | | 


set to (^ cal list (^ global 


phonenumbers 


PhoneNumberLabel.Text select list item index (^ global S 


图 4.24 选择 列表 的 下 一 项 


在 遍历 整个 列表 的 过 程 中 ,首先 实现 索引 变量 index 加 1 递增 ,然后 使 用 这 个 索引 变 
fit index 获取 列表 中 的 元 素 。 

下 面 介绍 一 个 小 示例 Number, 用 来 说 明 如 何 自 定义 索引 ,通过 索引 遍历 列表 ,以 及 
避免 索引 超出 列表 范围 的 方法 。Number 示例 的 运行 界面 如 图 4. 25 所 示 。 

第 一 步 先 建立 列表 变量 phoneNum, 列 表 中 包含 两 个 元 素 *1010101” 和 “2020202”, 如 
图 4. 26 所 示 。 


def as [_ call make a list 
据 : 1010101 
下 一 条 数据 
4.25 Number 示例 的 运行 界面 4.26 初始 化 列表 变量 


在 图 4. 27 中 ,全 局 变量 index 的 初始 化 值 为 1, 当 第 一 次 触发 Buttonl. Click 事件 
时 ,索引 变量 index 指向 列表 的 第 一 项 位 置 , 即 *1010101”, 并 将 变量 index 累加 1,index 的 值 
变 为 2。 在 第 二 次 触发 Button1. Click 事件 时 ,此 时 的 index 值 为 2, 索引 变量 index 指向 


def as | number 
全 index 1 


when  Button'.Click 
do 


set to 
Labellndex.Text 


set 


ndex 
sr nd 
call list (^ global 
x honeNum 


LabelValue.Text select list item index (^ global 


index 


set global 
g to Ce global 
| 


[ 7 number | 
index d 1 


index | * 


—————— 


图 4.27 列表 遍历 模块 
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列表 的 第 二 项 位 置 , 即 “2020202”, 并 将 变量 index 再 


次 累加 和 的 值 变 为 3. pese item: List index too 
当 第 三 次 单 击 按钮 触发 Buttonl. Click 事件 时 , 异 


Select list item: Attempt to get 


常 出 现 了 ,如 图 4.28 所 示 。 出 现 异 常 的 原因 是 索引 变 nuuc r na 
量 index 的 值 超出 了 列表 项 的 数目 ,index 的 当前 值 为 — 
3 ,而 索引 只 有 两 个 元 素 。 

为 了 解决 这 个 问题 ,需要 在 使 用 索引 变量 值 前 , 检 
查 索引 变量 是 否 超出 列表 长 度 ,修改 后 的 模块 结构 如 
图 4.29 所 示 。 使 用 了 条 件 判 断 模块 if, 将 变量 index 和 列表 变量 phoneNum 的 长 度 
(length of list) 进 行 比较 ,如 果 变 量 index 超出 范围 ,就 将 变量 index 赋值 为 1。 


i: Button1.Click 
do 


test o PS " (7 cai x list (^ global | 


index | length of list ] phoneNum 


set global to (^ number, | 
index 1j 


4.28 索引 超 范围 所 引发 的 异常 


then-do 


— 
set to (^ global 
Labelindex. Text index 


set tof call list (7 global 
L 7 honeNum 
LabelValue.Text select list item index (^ global 
A index 


Bets Index C goa d aman | 


图 4.29 修改 后 列表 遍历 模块 


下 面 给 出 Number 示例 的 全 部 模块 结构 如 图 4. 30 所 示 。 


as anie def as [” call make a list 


item (^ tex 
^ 1010101 


Num item (^ text 
prone ^. 2020202 


item (^ 


index 


When Button1.Click 


call list ^ global 
3 length of list M phoneNum | - 


to lobal 
C i index 


Labellndex.Text 


一 一 一 一 一 一 a 
set to (^ call list (^ global 
"| phoneNum 


LabelValue.Text select list item index (^ global 


j 
number 
index |+ 4 1 | 


El 4.30 Number 示例 的 全 部 模块 结构 


index 
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前 面 介绍 了 静态 列表 的 创建 方法 ,下 面 将 介绍 如 何 创 建 动 态 列表 。 

动态 列表 的 创建 方法 和 静态 列表 相似 ,不 同 之 处 是 动态 列表 在 创建 时 不 需要 初始 化 
列表 中 的 元 素 , 也 就 是 说 在 使 用 make a list 模块 的 时 候 , 不 需要 向 桶 item 中 添加 元 素 。 
图 4. 31 中 创建 了 一 个 动态 列表 phoneBook。 

向 动态 列表 中 加 入 元 素 , 需 要 调用 add items to list 模块 ,路 径 是 BuiltcIn— Lists > 
add items to list, 如 图 4. 32 所 示 。 


| Built-In | My Blocks" Advanced 


sal i 
Definition EF f 
insert list tem "^" 
Text ist 
EE 
Lists 
a eati iist 
Math ngtholtst 
mm T TM 


appendtolist |. (| 


def call make a list Control Rs 
ET is f 


F; E " 
phoneBook item L id additemstolst ien (| 
4.31 动态 列表 phoneBook 4.32 模块 编辑 器 中 add items to list 模块 


add items to list 模块 中 有 两 个 参数 槽 ,如 图 4. 33 Br Zç. Hi list 用 来 选择 目标 列表 对 
象 ,也 就 是 要 加 入 元 素 的 列表 变量 tem 是 被 添加 到 列表 中 的 元 素 。 

向 动态 列表 中 加 入 元 素 , 只 需要 将 列表 变量 拼接 在 add items to list EE Et ff fl list 
上 ,将 要 加 入 的 元 素 拼接 在 槽 item. 上 即 可 。 图 4. 34 是 向 列表 phoneBook 中 添加 了 一 个 
文本 元 素 *1010101”, 从 图 中 槽 item 的 数量 上 可 知 ,add items to list 模块 支持 向 动态 列 
表 中 一 次 加 入 多 个 元 素 。 


call list lobal 
ë : honeBook 
call i: item | text 
s (° add items to list 10101017 


add items to list item item 
ANE 
图 4.33 add items to list 模块 图 4.34 向 动态 列表 中 添加 元 素 


从 动态 列表 中 删除 元 素 , 需 要 调用 remove list item 模块 ,路 径 是 Built-In Lists 
remove list item, remove list item 模块 中 也 有 两 个 参数 槽 , 模 list 表示 目标 列表 对 象 , 醒 
index 表示 要 删除 的 元 素 在 列表 中 的 位 置 (索引 ), 如 图 4. 35 所 示 。 

如 果 要 删除 列表 phoneBook 中 的 第 一 项 , 则 将 数字 1 BEBE Ed index 上 ,将 列表 
phoneBook 拼接 在 槽 list 上 ,结构 如 图 4. 36 所 示 。 


Ë J 
call fist (^ cal list Í global TUM 


remove list item index Í remove list item index (" Chen 


FISSO DUI 


图 4.35 remove list item 模块 El 4.36 删除 phoneBook 列表 中 的 第 一 项 
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但 在 多 数 情况 下 ,用户 还 是 希望 通过 元 素 删 除 列 表 中 的 项 。 还 是 以 phoneBook 
为 例 , 如 果 和 希望 删除 列表 中 的 元 素 "1010101”, 则 可 以 调用 position in list 模块 ,路 径 
是 Built-In> Lists— position in list, position in list 模块 有 两 个 参数 槽 ,如 图 4. 37 所 
ZW HE thing 表示 目标 元 素 , 槽 list 表示 目标 列表 ,该 模块 会 返回 目标 元 素 在 列表 中 的 
索引 值 。 通 过 调用 remove list item 模块 ,根据 索引 值 就 可 以 删除 用 户 想 删除 的 列表 
元 素 了 。 


call list (^ global 
phoneBook 


remove list item index (^ global 
index 


图 4.37 根据 元 素 内 容 删 除 列表 中 的 元 素 
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本 数字 .颜色 ,也 可 以 是 列表 ,这 就 是 说 ,可 以 创建 包含 列表 的 列表 。 

下 面 来 介绍 如 何 实 现 列 表 嵌 套 , 先 创建 两 个 静态 列表 FruitList 和 AnimalList ,每 个 
列表 中 有 两 个 列表 元 素 ,如 图 4. 38 所 示 。 

然后 建立 列表 变量 ListofList, 调 用 make a list 模块 ,将 列表 FruitList 和 AnimalList 
拼接 到 槽 item 上 ,完成 列表 恋 套 结构 ,如 图 4.39 所 示 。 


call make a list 


4.38 FruitList 和 AnimalList 列表 4.39 ListofList 列表 


当然 ,也 可 以 按照 图 4. 40 BJ rik Bp CES ARA X Ph Zr ik CORR G8 o 
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ut as (^ cat maa] 
item| call make a list 
item | text 
apple 


item | text 


i 
ListofList item (^ call make a list 
item text 


item (7 text 


item [` 


item [^ 


图 4.40 BEIR 
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在 程序 设计 过 程 中 ,循环 也 是 一 种 经 常 使 用 到 的 结构 。 循 环 就 是 程序 中 重复 执行 同 
样 的 动作 ,这 样 的 情况 可 以 利用 循环 结构 来 实现 。 本 节 介 绍 两 种 循环 结构 foreach 模块 
和 while 模块 。 


441 foeach 


foreach 模块 可 以 用 来 遍历 列表 ,每 次 循环 都 获取 列表 中 的 一 个 元 素 。 但 需要 注意 的 
是 ,foreach 模块 一 次 只 能 处 理 一 个 列表 。foreach 模块 的 结构 如 图 4.41 Brzs Hl in list 
拼接 需要 遍历 的 列表 , 槽 variable 中 的 参数 var 是 遍历 列 


foreach variable name var Xu 程 中 的 元 素 - foreach 模 块 的 路 径 为 Buili-In-* 
uo Control-foreach, 


in list (^ 在 遍历 过 程 中 ,foreach 模块 首先 从 列表 中 获取 第 一 
个 元 素 ,赋值 给 变量 var, 这 样 就 可 以 在 槽 do 中 使 用 保存 
4.41 foreach 模块 在 var 中 的 第 一 个 列表 中 的 元 素 。 然 后 foreach 模块 再 从 
列表 中 获取 第 二 个 元 素 , 同 样 赋值 给 变量 var。 如 此 反 
复 ,直到 列表 中 最 后 一 个 元 素 被 访问 到 ,循环 过 程 结 束 。 
用 一 个 累加 数字 的 示例 说 明 如 何 使 用 foreach 模块 。 在 这 个 示例 中 ,列表 num 有 三 
个 数字 元 素 : 1.2 和 3 ,使 用 foreach 模块 遍历 列表 num, 将 三 个 数字 的 累加 值 保存 在 全 局 
变量 sum 中 ,如 图 4. 42 所 示 。 


442 while 


相对 于 foreach 模块 , while 模块 则 更 加 常用 一 些 。while 模块 是 一 种 有 条 件 循环 结 
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def as [_ number 
A 


def as [` call make a list 


item | number 


C value 
i j var 


item ( number 


in list (global 


z | 
isum 


) 


num 
item ( number 


item 


图 4.42 foreach 模块 的 累加 数字 示例 


构 ,在 条 件 满足 时 ,循环 过 程 将 持续 进行 , 当 条 件 无 法 满足 时 ,退出 循环 过 程 。 
while 模块 的 结构 如 图 4. 43 BW S RW test 用 来 拼接 判断 


while 循环 是 否 继续 执行 的 条 件 语句 , 槽 do 是 执行 动作 的 循环 D ED 
部 分 。while 模块 路 径 是 Built-In— Control while, 
一 一 一 


while 模块 里 面 的 循环 部 分 是 否 执行 ,要 根据 test 中 的 条 件 
进行 判断 , 当 test 中 的 条 件 模块 返回 true 时 ,程序 执行 模 do 中 
的 内 容 ; 若 返回 false, 则 不 执行 槽 do 中 的 内 容 , 而 是 继续 执行 while 模块 后 面 的 程序 
模块 。 

while 模块 的 执行 流程 如 图 4. 44 所 示 。 

还 是 以 数字 累加 为 例 , 说 明 如 何 使 用 while 模块 ,如 图 4.45 所 示 。 在 这 个 例子 中 ,要 
获得 数字 1 一 10 的 累加 结果 。 首 先 定义 两 个 变量 ,变量 sum 表示 累加 值 ,变量 n 表示 1 一 10 
的 数字 ,初始 值 为 1。 在 while 模块 中 , 模 test 的 条 件 是 “n 三 10”, 如 果 满足 条 件 , 模 do 的 
动作 是 将 变量 n 累加 到 sum 变量 中 ,并 在 每 次 循环 过 程 中 ,将 变量 n 增加 1。 这 样 在 n 等 
于 1 一 10 期 间 , 都 满足 条 件 “n 志 10”, 所 以 变量 sum 可 以 获取 到 1 一 10 的 累加 值 。 当 n 等 
于 11 时 ,无 法 满足 条 件 “n 三 10”,while 模块 结束 循环 。 


4.43 while 模块 


def as | number def as | number 
" 0 全 1 


[Eg 


Condition true? 
I 
yes 
zz 
B no 


c 


图 4.44 while 模块 执行 流程 图 图 4.45 while 模块 的 累加 数字 示例 
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45 = 数 


有 一 个 经 典 的 脑筋 急 转 弯 ,可 以 用 来 说 明 什 么 是 函数 。 还 记得 把 大 象 放 到 冰箱 里 面 
要 几 个 步骤 吗 ? 第 一 步 是 打开 冰箱 门 , 第 二 步 是 把 大 象 放 进 冰箱 ,第 三 部 是 关上 冰箱 门 。 

那么 ,把 李 雷 放 到 冰箱 里 面 的 过 程 是 什么 ?仍然 是 三 步 : 第 一 步 是 打开 冰箱 门 ,第 二 
步 是 把 李 雷 放 进 冰箱 ,第 三 步 是 关上 冰箱 门 。 那 如 果 要 把 韩 梅 梅 放 到 冰箱 里 面 的 步 又 ， 
读者 也 很 容易 就 会 想到 了 。 

如 果 用 函数 来 分 析 上 面 的 问题 ,可 以 把 * 放 进 冰箱 ”作为 一 个 函数 ,把 上 述 的 三 个 步 
又 作为 函数 的 内 容 , 而 到 底 把 谁 放 进 冰箱 就 成 了 函数 的 参数 。 

定义 函数 的 好 处 就 是 可 以 避免 重复 工作 。 举 个 例子 说 明 这 个 好 处 ,如 果 要 把 李 雷 、 
韩 梅 梅 . 林 涛 和 露 西 都 放 到 冰箱 里 面 ,那么 就 会 出 现 如 下 的 过 程 : 第 一 步 是 打开 冰箱 门 ， 
第 二 步 是 把 李 雷 放 进 冰箱 ,第 三 步 是 关上 冰箱 门 , 第 四 步 是 打开 冰箱 门 ,第 五 步 是 把 韩 梅 
梅 放 进 冰箱 ,第 六 步 是 关上 冰箱 门 , 第 七 步 是 打开 冰箱 门 , 第 八 步 是 把 林涛 放 进 冰箱 …… 
一 共 要 经 历 12 个 步骤 才 可 以 完成 。 

下 面 用 函数 来 简化 过 程 。 第 一 步 是 定义 一 个 “ 放 进 冰箱 ”函数 ,第 二 步 是 调用 函数 “ 放 
进 冰 箱 ” 将 李 雷 放 进 冰箱 ,第 三 步 是 调用 函数 将 韩 梅 梅 放 进 冰 箱 , 第 四 步 是 调用 函数 将 林涛 
放 进 冰箱 ,第 五 步 是 调用 函数 将 露 西 放 进 冰 箱 。 使 用 函数 后 ,经 历 的 步 又 降 到 了 5 个 。 

这 样 看 来 ,函数 将 重复 的 动作 进行 了 统一 的 描述 ,不 同 的 地 方 提出 来 作为 参数 ,以 后 
再 出 现 这 样 的 动作 ,只 要 使 用 不 同 参数 调用 函数 就 可 以 实现 重复 的 工作 了 。 

App Inventor 提供 了 自 定义 函数 功能 ,允许 用 户 将 实现 一 定 功 能 的 模块 进行 封装 ， 
并 为 其 封装 后 的 模块 进行 命名 ,这 样 就 创建 了 一 个 函数 ,并 可 以 被 其 他 模块 调用 ,实现 了 
基本 的 代码 复 用 。 代 码 复 用 不 仅 降低 了 程序 的 错误 率 , 而 且 提 高 了 程序 的 可 维护 性 。 
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在 App Inventor 中 ,定义 函数 的 过 程 与 定义 变量 的 过 程 十 分 相似 。 首 先 在 Built-In 一 
Definition 中 找到 函数 定义 模块 procedure 和 procedureWithResult, 如 图 4. 46 所 示 。 
App Inventor 中 有 两 个 函数 定义 模块 ,区 别 在 于 procedure 模块 没有 返回 值 , 而 


procedureWithResult 有 返回 值 。 两 个 函数 


luilt-in | My Blocks Advanced 

定义 模块 结构 如 图 4. 47 所 示 。 um = 

下 面 以 procedure 模块 为 例 , 说 明 如 何 es seen f, 
定义 函数 。 定 义 过 程 分 为 两 步 ,第 一 步 是 给 m t reus cef 
函数 命名 ,第 二 步 是 实现 函数 功能 。 Logic 

第 一 步 ,在 路 径 Built In Definition Central me c 
procedure 中 选取 procedure 模块 ,将 模块 名 Cor s 
procedure 更 改 为 自 定义 名 称 SumNum, 如 = 


图 4. 48 所 示 。 图 4.46 模块 编辑 器 中 的 函数 定义 模块 的 位 置 
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tọ procedure argf ta  procedureWithResult arg [” 


do de 
return (^ 
€————— GÀ 
图 4.47 两 个 函数 定义 模块 
t rg [” ta SumNum arg (7 


do — d 


图 4.48 定义 函数 名 称 


第 二 步 , 实 现 函 数 功 能 ,这 里 使 用 了 while 模块 中 的 “数字 累加 ”示例 ,将 其 封装 在 函 
数 SumNum 中 ,如 图 4.49 所 示 。 为 了 实现 累加 功能 ,在 函数 模块 外 定义 了 两 个 全 局 变 


量 sum fill n, 


def as number a def as r ue - 


4.49 SumNum 函数 


函数 定义 完成 后 ,怎样 才能 发 挥 它 的 作用 呢 ? 定义 完成 后 的 函数 只 是 一 个 单独 的 功 
能 模块 ,只 有 在 程序 执行 的 过 程 中 调用 了 这 个 函数 ,该 函数 才能 被 执行 而 发 挥 自己 的 功 
能 。 那 么 函数 是 怎样 被 程序 调用 的 呢 ? 

在 模块 编辑 器 的 My Blocks 中 的 第 一 个 选项 块 就 是 My Definitions ,顾名思义 ,这 里 
面包 含 所 有 自 定 义 的 变量 和 函数 的 调用 模块 。 当 一 个 函数 定义 完成 后 ,在 My 
Definitions 中 就 会 出 现 该 函数 的 调用 模块 。 

对 于 上 面 定 义 的 函数 SumNum Mi zi ,在 My Definitions 中 则 会 包含 该 函数 的 调用 模 
块 ,如 图 4. 50 所 示 。 

在 程序 执行 到 某 一 步 时 ,车 要 开始 调用 某 个 函数 , 则 只 需 在 程序 的 这 个 地 方 插 入 也 
数 调用 模块 , 当 程 序 执行 函数 调用 模块 时 , 则 函数 被 调用 ,开始 执行 函数 体 中 的 内 容 。 

在 图 4. 51 中 ,在 用 户 单 击 Buttonl 按钮 后 ,程序 调用 SumNum 函数 ,然后 进入 
SumNum 函数 体 中 ,在 执行 完 SumNum 函数 体 中 所 有 的 模块 后 , 跳 回 到 调用 SumNum 
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函数 的 位 置 ,继续 执行 下 一 个 修改 Buttonl 文字 内 容 的 模块 。 


when Button1.Click 


text 
Button1.Text already called SumNum 


t 
call 
SumNum 


图 4.50 SumNum 函数 的 调用 模块 图 4.51 调用 SumNum 函数 


452 函数 参数 


像 大 部 分 模块 一 样 ,函数 模块 也 有 自己 的 参数 ,可 以 根据 参数 的 不 同 ,产生 不 同 的 调 
用 结果 。 创 建 函 数 的 目的 是 消除 代码 的 元 余 , 提 高 代码 的 效率 ,最 重要 的 是 函数 要 尽量 
做 到 通用 性 好 ,这 就 需要 在 函数 中 定义 参数 ,使 函数 具有 广泛 性 和 普遍 性 。 

下 面 继续 修改 “数字 累加 ?示例 ,使 函数 可 以 自 定义 循环 的 次 数 。 在 未 修改 前 ,函数 
内 部 的 while 循环 次 数 固定 在 10 次 ,上 且 不 能 在 函数 被 调用 时 修改 。 依 照 图 4. 52 对 函数 
做 出 修改 ,在 槽 arg 上 增加 一 个 参数 N。 参 数 模块 在 Built-In>Definition> name, H4 #K 
从 name 修改 为 N 即 可 。 不 要 忘记 在 while 的 条 件 中 ,将 小 于 等 于 10, 更 改 为 小 于 等 
TN. 


def as | number def as [` number 
> sum 0 5 n 1 
i SumNum arg | name N 
arg 
do 


4.52 支持 参数 的 SumNum 函数 


对 上 面 函 数 的 参数 做 出 修改 后 ,函数 可 以 根据 调用 时 的 参数 值 决定 函数 的 循环 次 
数 。 例 如 在 图 4.53 中 ,函数 SumNum 的 调用 模块 多 了 一 个 槽 N ,将 数字 50 PETERE 
N 上 ,就 可 以 控制 函数 SumNum 内 部 循环 50 次 。 

通过 上 面 的 内 容 不 难 发 现 ,对 函数 参数 的 修改 可 以 增加 函数 的 通用 性 ,函数 参数 的 
设 定 对 于 函数 的 作用 范围 和 适用 性 具有 较 大 的 影响 ,所 以 在 函数 的 创建 过 程 中 ,要 注意 
函数 中 参数 的 设置 问题 。 
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4.53 调用 SumNum 函数 (参数 N 为 50) 


453 函数 返回 值 


函数 的 返回 值 可 以 直接 供 函 数 的 调用 者 使 用 ,从 而 简化 代码 逻辑 。procedure 模块 
定义 的 函数 则 没有 返回 值 ,而 procedureWithResult 模块 所 定义 的 函数 支持 返回 值 。 

procedureWithResult 模块 的 结构 如 图 4. 54 所 
示 , 包 含 两 个 槽 , 槽 arg 是 参数 接口 ,与 前 面 的 
procedure 模块 中 的 参数 接口 作用 相同 。 另 外 一 个 
FÉ return 则 是 用 来 返回 函数 结果 的 接口 ,并 且 将 函 
数 返 回 值 传 给 函数 调用 模块 。 图 4.54  procedureWithResult 模块 结构 

下 面 使 用 procedureWithResult 模块 改造 “数字 
累加 ”示例 ,为 了 与 SumNum 函数 有 所 区 别 ,该 函数 命名 为 SumNumResult, 如 图 4.55 所 
示 。SumNumResult 函数 具有 一 个 参数 N ,以 及 一 个 返回 值 ,将 全 局 变量 sum Bf J fE MBI 
return 上 ,函数 会 将 累加 值 sum 返回 给 函数 的 调用 者 。 


me 
N 


A 4.55 使 用 procedureWithResult 模块 构造 的 SumNumResult 函数 


因为 具有 返回 值 ,函数 SumNumResult 的 调用 模块 也 有 所 变化 ,图 4. 56 是 函数 
SumNumResult 和 SumNum 调用 模块 的 对 比 ,主要 变化 是 槽 的 位 置 不 同 。 
在 按钮 事件 单 击 函 数 中 ,调用 SumNumResult 函数 ,其 返回 值 可 以 直接 给 按钮 的 文 


55 


M 程序 设计 基础 


all N 
b SumNumResult [ A eimi 


4.56 SumNumResult 和 SumNum 调用 模块 的 对 比 
字 属 性 赋值 ,如 图 4. 57 所 示 。 


when Button1.Click 


all number 
SumNumResult 50 


Button1.Text 


4.57 调用 SumNumResult 函数 


46 和 模块 分 类 


本 章 前 面 介绍 的 内 容 基本 都 是 关于 模块 编辑 器 中 Built-In 区 域 的 模块 ,但 在 前 面 的 
示例 中 也 有 一 些 与 界面 控件 相关 的 模块 ,这 些 模块 都 在 模块 编辑 器 中 的 My Blocks 中 ， 
并 且 根 据 控件 的 不 同 , 它 们 各 自 所 包含 的 功能 模块 也 不 尽 相同 。 

模块 编辑 器 的 My Blocks 区 域 中 ,包含 的 项 有 My Definitions 项 和 界面 控件 项 ( 例 
如 Buttonl,Labell 等 )。 开 发 人 员 在 界面 设计 时 每 添加 一 个 控件 ,那么 在 My Blocks 中 
就 会 出 现 该 控件 项 , 单 击 控件 项 就 会 看 到 控件 的 相关 功能 模块 。 这 些 模块 根据 不 同 的 
性 质 和 作用 被 分 成 三 类 ,事件 模块 .属性 模块 和 方法 模块 ,并 且 为 了 便于 区 分 ,将 这 三 
类 模块 使 用 不 同 的 颜色 进行 标识 ,其 中 事件 模块 为 绿色 ,属性 模块 为 蓝 色 ,方法 模块 为 
紫色 。 

例如 ,在 界面 设计 器 中 选 定 一 个 按钮 控件 Button1 ,一 个 标签 控件 Labell ,并 且 界 面 
只 有 一 个 屏幕 Screenl, 这 时 候 在 模块 编辑 器 的 My 
Blocks 中 就 会 显示 如 图 4. 58 所 示 的 控件 项 。 

i 选择 Buttonl 和 Screenl 控件 项 后 ,其 右 侧 将 出 现 该 

控件 的 功能 模块 列表 ,如 图 4. 59 所 示 。 在 Buttonl 的 功 
能 模块 列表 中 ,Buttonl. Click 模块 是 事件 模块 ,所 有 的 事 
件 模 块 都 会 有 “when do” 的 字样 。set Buttonl. 
BackgroundColor to 是 属性 设置 模块 ,所 有 的 属性 设置 模块 都 有 “set to” 的 字样 ; 
Button1. BackgroundColor 是 属性 值 模块 ,这 里 将 属性 设置 模块 和 属性 值 模块 统称 为 属 
性 模块 。 

在 Screenl 的 功能 模块 列表 中 ,Screen1. CloseScreenAnimation 是 方法 模块 ,所 有 的 
方法 模块 都 有 “call” 的 字样 。 

知道 了 如 何 区 分 事件 .属性 和 方法 模块 后 ,下 面 对 My Blocks 中 的 My Definitions 区 
域 做 简单 的 介绍 。 

My Definitions 是 自 定义 函数 ,全 局 变量 和 参数 的 集合 ,如 图 4. 60 所 示 。 上 方 第 一 


Screen1 


4.58 My Blocks 中 的 控件 项 


Qu«sx Cndnod fz A 4i £ —— É) # Z 42 X Opp dhuentox 


Built [Advanced — Bein TRIS Adice cid] 
My Defntions ge My Definitions 
Buttont Buttont 
Labeli Label 
Seem : ETETA 


Æ 4.59 Buttoni 和 Screenl 的 功能 模块 列表 


个 模块 是 全 局 变量 n, 标 识 是 “global”, 第 二 个 就 是 全 局 变量 n 的 赋值 模块 。 上 方 第 三 个 
模块 是 参数 N, 在 函数 中 被 定义 和 使 用 。 最 后 两 个 模块 是 函数 SumNum 和 函数 
SumNumResult 的 调用 模块 。 


4.60 My Definitions 是 自 定义 函数 ,全 局 变量 和 参数 的 集合 


461 事件 


事件 是 指 某 种 特定 的 情况 发 生 , 例 如 单 击 按钮 .获取 焦点 等 。 在 App Inventor 中 事 
件 是 开启 程序 执行 的 关键 ,通过 事件 的 触发 ,才能 执行 事件 处 理 模 块 ,进而 运行 程序 中 所 
包含 的 功能 模块 。 
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例如 ,通过 对 单 击 Buttonl ,触发 按钮 单 击 事件 (Button1. Click) , 则 程序 可 以 将 标签 
Labell 的 背景 颜色 设置 为 红色 ,程序 结构 如 图 4. 61 所 示 。 


When Button1.Click 
d 
? [set to 
Label1.BackgroundColor. 


——MM 


图 4.61 Buttonl 单 击 事件 触发 程序 的 执行 


462 属性 


属性 是 指控 件 所 具有 的 性 质 , 如 宽度 高度. 背景 颜色 和 本 文 内 容 等 。 在 App 
Inventor 的 模块 编辑 器 中 ,为 每 个 控件 的 不 同属 性 都 提供 了 相应 的 属性 模块 ,并 且 提 供 
了 与 之 对 应 的 属性 设置 模块 。 在 程序 设计 过 程 中 ,可 以 通过 属性 设置 模块 对 控件 的 属性 
值 进行 修改 。 

在 图 4. 62 的 例子 中 ,set Label2. BackgroundColor to 是 属性 设置 模块 ,而 Labell. 
BackgroundColor 是 属性 值 模 块 。 通 过 将 set Label2. BackgroundColor to 模块 和 
Labell. BackgroundColor 模块 的 拼接 ,将 标签 Labell 的 背景 颜色 赋值 给 了 标签 Label2 。 


when Button1.Click 


set to 
Label1.BackgroundColor 


set to 


Label2. BackgroundColor Label1. BackgroundColor 


Á- 


4.62 对 Labell 和 Label2 的 背景 颜色 属性 设置 


463 方法 

在 App Inventor 的 控件 中 ,很 多 控件 都 有 自己 的 方法 ,例如 时 钟 控 件 的 增加 秒 数 方 
i CClock1l. AddSeconds) , 短 消 息 控件 的 发 送 消息 的 方法 (Texting1. SendMessage) 等 ,如 
图 4.63 所 示 。 


call instant (^ Em 
|| ^ —Clockt.Now 


Clock1.AddSeconds seconds P 
| hO sas] 


call call 
Texting1.SendMessage ContactPicker1.Open 


4.63 控件 的 方法 模块 


用 户 自 定义 的 函数 ,也 可 以 是 一 种 方法 。 沿 用 上 面 的 示例 ,创建 一 个 函数 setColor， 
该 函数 体 中 修改 两 个 标签 的 背景 颜色 ,然后 在 Buttonl 的 单 击 事件 中 ,调用 自 定 义 的 函 
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数 , 如 图 4. 64 所 示 。 


图 4.64 函数 方法 调用 


= zm 


1. 简 述 程序 设计 中 的 几 种 分 支 和 循环 模块 结构 的 特点 。 
2. 简 述 静态 列表 和 动态 列表 的 区 别 。 

3. 设计 一 个 可 以 计算 三 个 整数 平均 值 的 函数 。 

4. 简 述 事件 .属性 和 方法 的 区 别 。 


: 
: 
Á 


warnanGr E 
用 户 界面 设计 


用 户 界面 是 应 用 程序 开发 的 重要 组 成 部 分 ,决定 了 应 用 程序 是 否 美观 、 易 用 。App 
Inventor 使 用 可 视 化 的 、 所 见 即 所 得 的 方式 来 搭建 应 用 程序 的 界面 部 分 。 通 过 本 章 的 学 
习 , 读 者 将 熟悉 界面 设计 中 常用 的 基本 控件 和 布局 格式 。 

本 章 学 习 目 标 : 

° 了 解 控件 分 类 和 基本 用 途 ; 

° 掌握 基础 控件 的 使 用 方法 ; 

。 掌握 界面 布局 的 使 用 方法 ; 

。 掌握 媒体 控件 的 使 用 方法 ; 

。 了 解 社交 控件 的 使 用 方法 。 


51 控件 概述 


App Inventor 的 界面 开发 采用 可 视 化 的 方法 ,通过 将 界面 控件 拖 忠 到 界面 编辑 器 
内 ,在 设计 区 中 直接 生成 界面 效果 图 ,这 些 可 以 被 拖 蝶 的 界面 元 素 就 是 控件 。 

App Inventor 的 控件 库 中 有 丰富 的 界面 控件 。 控 件 库 细 分 为 9 个 子 类 , 共 51 个 控 
T ,控件 的 类 别 和 每 类 控件 的 数量 如 表 5. 1 所 示 。 


R51 界面 控件 类 别 


类 别 说 明 类 别 说 明 
Basic 基础 控件 ,10 个 Screen Arrangement 屏幕 布局 控件 ,3 个 
Media 媒体 控件 ,6 个 Other stuff 其 他 控件 ,9 个 
Animation 动画 控件 ,2 个 Not ready for prime time | 不 成 熟 控件 ,5 个 
Social 社交 控件 ,6 个 LEGO MINIDSTORMS | 乐高 机 器 人 控件 ,7 个 
Sensors 传感器 控件 ,3 个 


基础 控件 (Basic) 中 存储 着 界面 开发 时 使 用 率 最 高 的 控件 ,如 按钮 .标签 和 复 选 框 等 
控件 。 媒 体 控 件 (Media) 中 主要 是 用 来 播放 声音 、 视 频 , 以 及 进行 录像 的 控件 。 动 画 控件 
(Animation) 是 用 来 开发 游戏 的 移动 效果 的 控件 。 传 感 器 控件 (Sensors) 包 含 最 常用 的 加 
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速度 传感器 .位置 传 感 器 和 方向 传感器 控件 。 屏 幕布 局 控件 (Screen Arrangement) 是 用 
于 设 定 屏 幕 中 元 素 排列 方式 的 控件 。 其 他 控件 (Other stuff) 中 包含 没有 被 划 归 到 其 他 类 
别 的 控件 ,如 蓝牙 客户 服务 端 .语音 识别 .小 型 Web 数据 库 等 控件 。 不 成 熟 控件 (Not 
ready for prime time) 是 在 试用 期 的 一 些 控件 ,这 些 控件 未 来 可 能 会 进入 其 他 控件 类 中 ， 
成 为 正式 控件 ,也 有 可 能 从 控件 库 中 被 删除 。 乐 高 机 器 人 控件 (LEGO MINIDSTORMS) 
是 乐高 NXT 智慧 型 机 器 人 的 开发 控件 。 
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基础 控件 类 中 的 控件 具有 较 高 的 使 用 频率 ,这 些 控件 包括 按钮 画布, 复 选 框 ` 图 片 、 
标签 .下拉 菜单 、 密 码 框 , 文 本 框 和 时 钟 。 微 型 数据 库 (TinyDB) 控 件 的 使 用 方法 将 在 第 
7 章 中 进行 介绍 。 


521 按钮 .标签 和 图 像 


按钮 (Button) 是 界面 上 最 基本 的 组 件 , 主 要 提供 单 击 式 的 触发 操作 。 通 过 设置 按钮 
的 事件 和 状态 ,可 以 实现 基本 的 人 机 交互 功能 。 在 基础 控件 类 中 的 第 一 项 就 是 按钮 ,如 
图 5. 1 所 示 , 可 见 按钮 在 界面 开发 中 的 重要 程度 。 所 有 控件 的 右 侧 都 有 一 个 问号 , 单 击 
问号 可 以 获取 到 控件 的 使 用 说 明 。 

App Inventor 的 按钮 是 可 以 添加 图 片 的 , 相当 于 传统 意义 的 “图 像 按钮 
(ImageButton)”, 而 且 可 以 设置 按钮 自身 的 形状 ,例如 设置 成 长 方形 ,椭圆 形 的 按钮 。 这 
些 改变 只 要 简单 地 修改 按钮 属性 就 可 以 实现 。 图 5.2 给 出 了 按钮 的 属性 编辑 栏 , 在 这 里 
可 以 方便 地 修改 按钮 属性 。 


Basic 


5.1 基础 控件 类 和 按钮 控件 


BackgroundColor 


Shape 


a RES W oss deut — [x] 
Button e 
Enabled pes 
Canvas o Text for Buttont 
M checkBox o Font&cid Textlignment. 
w 
8 cock ° center 
Fonttalic TexColor 
Image ° n 国 Derour 
[A] Label ° Ps Visible. 
B uspas o Et] [rowing |=] 
ë wan 
ES PasswordTeMBox e 确定 取消 Foi 
doraut E) Automatic. 
HU TextBox o 
/ ~ imag Height 
s ; dieu = mus 


5.2 按钮 控件 的 属性 编辑 栏 


在 后 面 介 绍 其 他 控件 时 ,如 Enabled. Text Alignment. Width 和 Height 属性 会 频繁 


地 出 现 ,在 这 里 先 对 这 些 通 用 属性 进行 介绍 。 


Enabled 属性 标识 着 控件 是 否 可 用 。 将 控件 的 Enabled 属性 设置 为 不 可 用 ,在 界面 
上 的 控件 会 变 为 灰色 , 且 不 接受 任何 用 户 操作 。 在 图 5.3 中 ,Buttonl 的 Enabled 属性 为 


可 用 ,而 Button2 的 Enabled 属性 为 不 可 用 。 
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TextAlignment 属性 是 文字 的 对 齐 方 式 ,支持 左 对 齐 、 右 对 齐 和 居中 对 齐 三 种 对 齐 方 
式 , 图 5.4 中 的 三 个 按钮 从 上 到 下 分 别 是 左 对 齐 、 居 中 对 齐 和 右 对 齐 的 显示 文字 。 


Text for Button1 


Text for Button2 


图 5.3 Enabled 属性 


Text for Button1 


Text for Button2 


Text for Button3 


5.4 TextAlignment 属性 


Width HERE) fil Height re RE) J8 PEE Z: BR FE PE 25 44 BJ Je FE, d | E Pe P fE ERE D Sd 
示 的 宽度 和 高 度 , 支 持 自动 (Automatic) ,填充 (Fill Parent) 和 固定 尺寸 (Pixels) 三 种 选择 。 
如 表 5. 2 所 示 给 出 了 按钮 所 有 支持 的 属性 ,以 及 属性 说 明 。 


表 5.2 按钮 控件 的 属性 


属 性 说 明 
Background Color 设置 按钮 的 背景 色 
Enabled 设置 按钮 是 否 可 用 
FontBold 设置 字体 加 粗 
Fontltalic 设置 字体 倾斜 
FontSize 设置 字体 大 小 
FontTypeface 设置 字体 类 型 
Image 设置 按钮 的 背景 图 案 
Shape 设置 按钮 的 形状 ,如 圆 角 按钮 .矩形 按钮 等 
Text 设置 按钮 上 显示 的 文字 ,如 果 清 空 则 不 在 按钮 上 显示 任何 文字 
TextAlignment 设置 按钮 上 文字 的 对 齐 方式 
TextColor 设置 文本 的 颜色 
Visible 设置 按钮 是 否 可 见 
Width 设置 按钮 的 宽度 
Height 设置 按钮 的 高 度 


Shape 属性 可 以 控制 按钮 的 外 部 形状 ,目前 支持 圆 角形 .矩形 和 椭圆 形 的 按钮 ,如 


图 5.5 所 示 。 


Text for Button1 


按钮 支持 的 事件 有 单 击 事件 (Click)、 长 时 间 单 击 事件 
(LongClick) ,获取 焦点 事件 (GetFocus) 和 失去 焦点 事件 (LostFocus)， — |TemferButonz 


如 图 5.6 所 示 。 单 击 事件 是 将 手指 按 在 按钮 上 ,然后 抬 起 时 产生 。 


Textfor Button3 


手指 按 下 后 立即 抬 起 才 会 产生 单 击 事件 ,否则 会 产生 长 时 间 单 击 事 
件 。 如 果 长 时 间 按 在 按钮 上 时 ,即使 没有 抬 起 手指 ,也 会 引发 长 时 间 图 5.5 Shape 属性 


单 击 事件 。 


标签 (Label) 主要 起 到 文字 显示 的 作用 ,但 标签 不 允许 用 户 进行 输入 操作 ,只 能 够 显 
示 文 字 信息 ,如 图 5.7 所 示 。 标 签 只 有 属性 ,没有 事件 ,因此 标签 不 支持 单 击 .长 时 间 单 


击 或 焦点 切换 等 操作 。 
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ghen Buttont.Click pen Button1.GotFocus 
do do 


Ei 


这 是 默认 标签 


2 eins poem 这 是 党 背景 颜色 的 标签 


这 是 修改 过 字体 属性 的 标签 


图 5.6 按钮 控件 事件 图 5.7 标签 控件 


标签 与 按钮 有 部 分 属性 是 相同 的 ,因此 不 再 重复 介绍 ,标签 支持 的 属性 可 以 参考 
表 5. 3。 
表 5.3 标签 控件 的 属性 


属 性 说 明 属 性 说 明 
Background Color | 设置 标签 背景 色 TextAlignment 设置 标签 内 文字 的 对 齐 方式 
FontBold 设置 字体 加 粗 TextColor 设置 文本 的 颜色 
Fontltalic 设置 字体 倾斜 Visible 设置 标签 是 否 可 见 
FontSize 设置 字体 大 小 Width 设置 标签 的 宽度 
FontTypeface 设置 字体 类 型 Height 设置 标签 的 高 度 
Text 设置 标签 栏 里 显示 的 文字 


图 像 (Image) 控 件 用 于 在 界面 上 显示 各 种 图 像 文件 ,图 像 控 件 也 不 支持 事件 ,所 支持 
的 属性 如 表 5.4 所 示 。 图 像 控 件 虽然 功能 单一 ,但 由 于 属性 简单 .易于 使 用 ,因此 在 应 用 
开发 过 程 中 会 经 常 被 使 用 到 。 
表 5.4 图 像 控件 的 属性 


属 性 说 明 属 性 说 明 
Picture 选择 显示 的 图 像 Width 设置 图 像 的 宽度 
Visible 设置 图 像 是 否 可 见 Height 设置 图 像 的 高 度 


图 像 控件 的 使 用 会 极 大 地 增强 应 用 程序 的 美观 程度 ,巧妙 地 使 用 图 像 控 件 是 一 项 技 
FourSeasons 巧 , 下 面 以 FourSeasons 示例 进行 讲解 ,介绍 如 何 使 用 
图 像 控件 ,按钮 和 标签 控件 ,完成 一 个 稍微 复杂 一 些 的 
应 用 程序 。 

FourSeasons 示例 的 运行 界面 图 5. 8 Bros ,用 户 通 
过 单 击 下 方 标 有 “春天 ”“ 夏 天 ”“ 秋 天 ”和 “冬天 ”的 
4 个 按钮 ,切换 界面 上 方 的 表示 季节 的 图 片 。( 注 : 


者 天 | FourSeasons 示例 的 “ 春 ”"“ 夏 ”“ 秋 ”、“ 冬 ”的 风景 图 
E 片 , 素 材 来 源 于 http: // www. nipic. com/show/3/35/ 
= 5067160k709b6c7f html.) 

ES FourSeasons 示例 的 界面 简单 明了 ,如 图 5. 9 所 


Ess FourSeasons PUER 示 , 最 上 方 的 显示 “四 季 更 蔡 ” 的 是 一 个 标签 ,标签 的 名 
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称 为 Title。 下 方 是 显示 季节 的 图 像 控 件 ,名 称 为 picture。 再 下 方 是 一 个 标签 控件 ,名 称 
为 text, 用 来 显示 用 户 单 击 按钮 后 的 提示 信息 。 最 下 方 是 4 个 按钮 控件 ,分 别 命 名 为 
Spring, Summer, Autumn 和 Winter, 


E Display hidden components in Viewer 


GME 5:09PM powe 


=E 


图 5.9  FourSeasons 示例 的 界面 设计 图 


在 工程 中 使 用 图 像 控 件 ,将 要 使 用 的 图 片 通过 Upload new 按钮 加 载 到 工程 中 ， 
Upload new 按钮 在 界面 编辑 器 的 资源 区 (Media) 中 ,如 图 5. 10 所 示 。 


C:\Users\Administrato: 


Upload new... 


5.10 将 图 片 加 载 到 工程 中 


FourSeasons 示例 的 逻辑 非常 简单 :“ 单 击 不 同 的 按钮 ,显示 不 同 的 图 片 和 带 不 同 颜 
色 的 文本 信息 ”, 这 样 需要 为 每 个 按钮 添加 一 个 单 击 事件 ,并 在 单 击 事件 中 修改 显示 的 图 
片 , 以 及 显示 不 同 颜色 的 文字 。FourSeasons 示例 的 逻辑 模块 图 如 图 5.11 所 示 。 


522 文本 框 、 复 选 框 和 密码 框 


文本 框 (TextBox) 是 一 种 供用 户 进 行 输入 文字 的 控件 。 虽 然 文 本 框 可 以 显示 文字 信 
息 , 但 其 主要 的 功能 还 是 为 用 户 提 供 输 入 信息 的 区 域 ,比如 登录 框 . 搜 索 栏 或 是 编辑 文字 
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图 5.11 FourSeasons 示例 的 全 部 逻辑 模块 


的 写字 板 等 。 文 本 框 的 使 用 范围 非常 广泛 ,是 基本 的 信息 输入 控件 之 一 ,是 很 多 应 用 程 
序 中 不 可 或 缺 的 组 成 部 分 。 

当 文本 框 中 的 内 容 为 空 时 ,会 自动 在 文本 框 中 以 灰色 文字 显示 提示 信息 (Hint) 。 提 
示 信 息 在 文本 框 的 Hint 属性 中 设置 ,可 以 提示 用 户 在 
文本 框 内 输入 信息 的 类 型 。 例 如 ,在 图 5. 12 中 ,上 方 
这 是 一 个 可 以 显示 多 行文 本 的 文本 框 , 这 是 -个 | 的 文本 框 中 显示 了 “Hint for TextBox1” 的 提示 信息 。 


Hint for TextBox1 


可 以 显示 多 行文 本 的 文本 框 , 这 是 一 个 可 以 显示 SNP ANS 
多 行文 本 的 文本 框 ， 这 是 一 个 可 以 里 示 多 行文 本 MultiLine 属性 可 以 控制 文本 框 显示 单行 文本 或 
的 文本 杠 ， 这 是 一 个 可 以 显示 多 行文 本 的 文本 


框 ， 这 是 一 个 可 以 里 示 多 行文 本 的 文本 框 是 多 行文 本 ,在 图 5. 12 中 ,上 方 的 文本 框 的 MultiLine 


图 5.12 文本 框 属性 没有 被 设置 ,无论 用 户 输入 多 少 信息 ,文本 框 会 一 
直 保 持 单行 的 状态 ;下 方 文 本 框 的 MultiLine 属性 已 
经 被 设置 ,因此 在 用 户 输入 较 多 信息 时 ,文本 框 会 自动 变 为 多 行 显 示 模 式 。 
NumbersOnly 属性 控制 了 文本 框 中 可 输入 信息 的 类 型 ,如 果 该 属性 被 设置 为 true， 
文本 框 只 接受 数字 ,不 接受 用 户 输入 其 他 字符 。 
文本 框 控件 的 全 部 属性 可 参考 如 表 5.5. 


表 5.5 文本 框 控件 的 属性 


属 性 说 RB 
Background Color 设置 文本 框 的 背景 色 ,默认 为 白色 
Enabled 设置 文本 框 是 否 可 用 
FontBold 设置 字体 加 粗 
Fontltalic 设置 字体 倾斜 
FontSize 设置 字体 大 小 
FontTypeface 设置 字体 类 型 
Hint 设置 文本 框 的 提示 信息 
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续 表 
属 性 说 明 
MultiLine 设置 是 否 支持 多 行 显 示 
NumbersOnly 设置 是 否 只 允许 输入 数字 
Text 设置 文本 框 上 默认 显示 的 文字 内 容 
TextAlignment 设置 按钮 上 文字 的 对 齐 方式 
TextColor 设置 文本 的 颜色 
Visible 设置 文本 框 是 否 可 见 
Width 设置 文本 框 的 宽度 
Height 设置 文本 框 的 高 度 


文本 框 仅 支持 获取 焦点 事件 (GotFocus) 和 失去 焦点 事件 (LostFocus) ,如 图 5. 13 


所 示 。 


复 选 框 (CheckBox) 是 可 以 同时 选中 多 项 的 选项 框 ,供用 户 在 不 同 选 项 间 进 行 多 项 选 
择 时 使 用 ,在 程序 当中 起 到 条 件 识别 的 作用 ,如 图 5. 14 Bron. 


好 sn TextBox1.GotFocus when TextBox1.LostFocus 
do E do B 


图 5.13 文本 框 控件 事件 


| | Text for CheckBox1 


Text for CheckBox2 


A 5.14 复 选 框 


Checked 属性 是 复 选 框 的 标志 性 属性 ,表示 复 选 框 是 否 被 选中 。 复 选 框 的 高 度 
(Height) 和 宽度 (Width) 设 置 的 是 复 选 框 文字 所 占用 的 空间 。 复 选 框 一 般 多 个 联合 起 来 
使 用 ,作为 多 个 条 件 的 组 合 判 断 依据 ,不 过 也 可 以 单独 使 用 。 复 选 框 全 部 属性 如 表 5. 6 


所 示 。 
表 5.6 复 选 框 控件 的 属性 

属 性 说 明 
Background Color 设置 复 选 框 的 背景 色 
Checked 设置 复 选 框 默认 状态 是 否 被 选中 
Enabled 设置 复 选 框 是 否 可 用 
FontBold 设置 复 选 框 字体 加 粗 
Fontltalic 设置 复 选 框 字体 倾斜 
FontSize 设置 复 选 框 字体 大 小 
FontTypeface 设置 复 选 框 字体 类 型 
Text 设置 复 选 框 的 文字 注释 
TextColor 设置 文本 的 颜色 
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续 表 
属 性 说 明 
Visible 设置 复 选 框 是 否 可 见 
Width 设置 复 选 框 的 宽度 
Height 设置 复 选 框 的 高 度 


复 选 框 除 了 支持 获取 焦点 事件 (GotFocus) 和 失去 焦点 事件 (LostFocus) 以 外 ,还 支 
持 选项 更 改 (changed) 事 件 ,更 改 事件 在 复 选 框 选择 状态 发 生 改 变 时 产生 ,如 图 5. 15 


所 示 。 


密码 框 (PasswordTextBox) 是 一 种 特殊 的 文本 框 , 一 般 用 于 接受 用 户 输入 密码 ,在 用 
户 输入 信息 时 ,密码 框 中 会 将 输入 的 内 容 进行 屏蔽 处 理 。 

图 5. 16 上 方 的 密码 框 是 在 输入 内 容 为 空 时 显示 提示 信息 ,下 方 的 密码 框 是 用 户 输 
入 了 密码 信息 ,屏蔽 处 理 后 ,显示 为 一 行星 号 。 密 码 框 控件 的 可 编辑 属性 如 表 5.7 所 示 。 


en CheckBox1.GotFocus 他 sn CheckBox1.LostFocus 输入 密码 
do T > 


5.15. 复 选 框 控件 事件 5.16 ”密码 框 
表 5.7 密码 框 控件 属性 

属 性 说 明 
Background Color 设置 密码 框 的 背景 色 
Enabled 设置 密码 框 是 否 可 用 
FontBold 设置 密码 框 字体 加 粗 
Fontltalic 设置 密码 框 字体 倾斜 
FontSize 设置 密码 框 字体 大 小 
FontTypeface 设置 密码 框 字体 类 型 
Hint 设置 密码 框 的 提示 信息 
Text 设置 密码 框 里 显示 的 文字 
TextAlignment 设置 密码 框 上 文字 的 对 齐 方式 
TextColor 设置 文本 的 颜色 
Visible 设置 密码 框 是 否 可 见 
Width 设置 密码 框 的 宽度 
Height 设置 密码 框 的 高 度 
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密码 框 也 仅 支 持 获 取 焦 点 事件 (GotFocus) 和 失去 焦点 事件 (LostFocus) ,如 图 5. 17 
所 示 。 

密码 框 , 文 本 框 和 复 选 框 是 制作 登录 界面 的 必 备 元 素 , 下 面 以 Login 示例 为 例 ,介绍 
如 何 制 作 登 录 界 面 。 

Login 示例 的 运行 界面 如 图 5. 18 所 示 , 用 户 在 “输入 用 户 名 ”文本 框 中 输入 用 户 名 ， 
在 “输入 密码 ”密码 框 中 输入 密码 , 单 击 “ 登 录 ” 按 钮 就 可 以 完成 登录 过 程 。 复 选 框 用 来 控 
制 是 否 显 示 提 示 信 息 。Login 示例 中 只 有 一 组 正确 的 用 户 名 和 和 密码, 用户 名 是 user ,密码 
是 123456。 如 果 用 户 输入 正确 ,并 成 功 登 录 , 屏 幕 上 方 的 文本 框 将 显示 登录 成 功 的 提示 
信息 “login success”, 如 果 没 有 正确 地 输入 用 户 名 和 密码 ,屏幕 上 方 的 文本 框 将 显示 登录 
失败 的 提示 信息 “login failure”。 


输入 密码 


登录 
ghen PasswordTextBox1.GotFocus when PasswordTextBoxt.LostFocus. 
E » [7] sse 
户 名 : user ,密码 : 123456 


5.17 密码 框 控件 事件 5.18 Login 示例 运行 界面 


在 Login 示例 的 界面 设计 图 (图 5. 19) 上 ,修改 模块 区 (Components) 中 的 控件 名 称 , 尽 
量 使 控件 名 称 具 有 一 定 的 含义 ,这 样 便 于 在 模块 编辑 器 中 找到 需要 的 事件 和 属性 模块 。 


E Display hidden components in Viewer [A)intopispiy 
CAE @ 5:09PM W iorexBox 
Login E PassworcTextBox 
国 LognButon 
请 输入 用 户 名 和 密码 = 


因 


Hintinfo 


—5 | 
M 显示 登录 提示 信息 
用 户 名 user IS : 123456 


5.19 Login 示例 的 界面 设计 图 
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Login 示例 的 逻辑 部 分 主要 响应 两 个 事件 ,一 个 是 “登录 ”按钮 的 单 击 事件 ,一 个 是 
“显示 登录 信息 ” 复 选 框 的 选项 更 改 事件 。 

在 “登录 ”按钮 的 单 击 事件 (图 5. 20) 中 ,首先 判断 IDTestBox 中 的 文本 是 否 为 
"user" , PasswordTextBox 中 的 文本 是 否 为 "123456”, 这 两 个 判断 是 用 来 确定 用 户 名 和 密 
码 是 否 与 预 设 值 相同 。 如 果 用 户 名 和 密码 正确 ,在 InfoDisplay 中 显示 信息 “login 
success" , 否则 显示 信息 “login failure”, 


When LoginButton.Click 
do 


else-do 
set to [` text 
InfoDisplay.Text login failure 


" 
一 一 一 


图 5.20 “登录 "按钮 的 单 击 事件 


在 复 选 框 的 选项 更 改 事件 (图 5. 21) 中 ,首先 判断 复 选 是 否 被 选中 ,如 果 被 选中 ,将 
HintInfo 控件 的 可 见 (Visible) 属 性 设 为 真 ,显示 登录 提示 信息 ;反之 ,将 HintInfo 控件 的 
可 见 (Visible) 属 性 设 为 假 ,将 登录 提示 信息 隐藏 起 来 。 


When LoginHint.Changed 


ifelse 


then-do 
set to 
Hintlnfo.Visible true 


else-do 
set to 
| Hintlnfo.Visible 5 false | 


n 
一 oe 


5.21 “显示 登录 信息 ” 复 选 框 的 选项 更 改 事件 
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列表 选项 (ListPicker) 是 从 列表 多 个 选项 中 选取 某 一 个 选项 的 控件 ,适合 多 选 一 的 
情况 。 列 表 选 项 被 放置 在 界面 上 ,形状 如 一 般 的 按钮 ,如 图 5. 22 所 示 , 单 击 后 出 现 黑色 
背景 的 列表 供用 户 选择 。 在 用 户 单 击 列表 中 的 某 一 选项 时 ,黑色 背景 的 列表 界面 会 消 
失 , 返 回 到 图 5. 22 的 白色 列表 界面 。 

列表 选项 中 显示 的 列表 元 素 , 既 可 以 在 界面 设计 器 中 定义 ,也 可 在 模块 编辑 器 中 进 
fi. 
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Text for ListPicker1 


图 5.22 列表 选项 


在 界面 设计 器 中 定义 列表 元 素 ,方法 是 编辑 控件 的 ElementsFromString 属性 ,使 用 
逗号 分 隔 开 不 同 的 列表 元 素 。 例 如 ,编辑 ElementsFromString 属性 为 “100,500,1000， 
2000”, 如 图 5.23 所 示 ,显示 的 效果 如 图 5.22 所 示 。 

另 一 种 方法 是 在 模块 编辑 器 中 ,将 列表 选项 的 Elements 属性 和 列表 元 件 (make a 
list) 相 关联 ,并 在 列表 元 件 内 部 的 item 槽 上 添加 多 个 文本 (text) 数 据 , 完 成 列表 元 素 的 
添加 ,如 图 5. 24 所 示 。 


yhen Screent.lnitialize 


如 Ë call make alist 


iem Ü test og 
"em Ü tet 500 
iem Ü tet. 1000 
iem Ç tet 2000 


item f 


ListPicker1.Elements 


ElementsFromString 
100, 500, 1000, 2000 


图 5.23 列表 选项 ElementsFromString 属性 图 5.24 Elements 属性 和 列表 元 件 


在 列表 选项 的 属性 中 ,以 往常 见 的 一 些 属 性 这 里 就 不 再 费 述 ,只 介绍 列表 选项 的 一 
些 专 有 属性 ,如 表 5.8 所 示 。 

列表 选项 的 专 有 事件 包括 选 前 操作 (BeforePicking) 和 选 后 操作 (AfterPicking) , 如 
图 5.25 所 示 。 

选 前 操作 是 在 用 户 单 击 列表 选项 的 按钮 之 后 发 生 的 事件 ,这 个 事件 发 生 在 列表 元 素 
页 面 弹 出 时 之 前 ,一 般 用 于 处 理 触 发 列表 选项 之 后 的 连带 操作 。 

选 后 操作 是 在 用 户 单 击 选择 列表 元 素 之 后 发 生 的 事件 ,用 于 处 理 用 户 做 出 的 选择 ， 
这 是 列表 选项 最 常用 的 事件 。 
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X 5.8 列表 选项 的 专 有 属性 


— ae mme 0 BT 


Selection 被 选中 的 列表 元 素 
ElementsFromString | 字符 串 方式 的 列表 元 素 


图 5.25 列表 选项 专 有 事件 


时 钟 (Clock) 是 非 可 视 化 组 件 , 可 以 获取 当前 时 间 、 格 式 化 输出 时 间 、 对 时 间 进 行 运 
算 , 还 可 以 在 固定 的 时 间 间 隔 触 发 事件 。 由 于 时 钟 的 应 用 范围 比较 广泛 ,因此 被 放置 在 
基本 控件 库 当 中 。 

时 钟 可 以 很 方便 地 获取 当前 时 间 和 日 期 ,并 可 以 按照 一 定 的 格式 显示 出 来 。 获 取 当 
前 时 间 ( 手 机 时 间 ) 的 方法 是 调用 时 钟 控件 的 Now 方法 ,可 以 获取 到 一 个 当前 的 时 间 点 
实例 (Instant) ,如 图 5. 26 所 示 。 

在 获取 到 当前 时 间 点 的 实例 后 ,就 可 以 调用 不 同 的 方法 ,获取 与 当前 时 间 点 相关 的 
各 种 显示 方式 。 例 如 ,在 图 5.27 中 ,调用 时 钟 的 FormatDateTime 方法 ,将 Clockl. Now 
拼接 在 槽 instant 中 ,就 可 以 输出 格式 化 的 “日 期 十 时 间 ”, 例 如 2013-4-1 AM12: 00; 00, 
如 果 调 用 时 钟 的 FormatDate 方法 ,同样 将 Clock1. Now 拼接 在 槽 instant 中 ,就 可 以 输出 


格式 化 的 “日 期 ”, 例 如 2013-4-1。 


图 5.26 当前 时 间 点 图 5.27 格式 化 日 期 和 时 间 


除了 可 以 将 当前 时 间 整 体 显 示 以 外 ,还 可 以 分 别 获 取 当 前 的 年 月、 日 小时、 分钟、 
秒 . 毫 秒 .星期 等 信息 。 获 取 这 些 信 息 都 是 通过 调用 时 钟 的 不 同方 法 实现 的 。 在 图 5. 28 
中 ,分 别 调用 时 钟 的 Year, Month 和 DayOfMonth 方法 ,获取 当前 时 间 的 年 月、 日 信息 。 

在 实际 的 开发 过 程 中 ,“ 一 小 时 以 后 ”或 者 “一 天 以 后 "这样 的 时 间 点 也 经 常 被 用 到 。 
这 样 的 时 间 点 也 可 也 通过 时 钟 的 一 些 方 法 进行 表述 。 例 如 在 图 5.29 rp. 通过 时 钟 的 


n^ 
v 


“ “cosa year "Ü cnn | ms 
< Ë cic tonis "9 Ü °! cosa Now | x Í i rra 


^ 
number 
^ 1 


图 5.28 获取 当前 时 间 的 年 .月 .日 信息 图 5.29 时 间 计 算 
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AddHours 方法 ,将 Clock1. Now 拼装 在 槽 instant 上 ,并 将 数字 1 BEER hours 上 ,就 
可 以 获取 一 个 小 时 以 后 的 时 间 点 。 同 样 地 ,将 Clockl. Now 拼装 在 AddDays 方法 的 槽 
instant 上 ,并 将 数字 1 拼装 在 槽 days 上 ,就 可 以 获取 一 天 以 后 的 时 间 点 。 这 些 进行 时 间 
计算 的 方法 都 是 以 “Add” 开 头 ,例如 AddDays, AddSeconds, AddWeeks 和 AddYears 等 。 

除了 上 面 所 介绍 的 方法 外 , 时钟 还 支持 一 些 其 他 用 途 的 方法 , 如 Duration, 
MakelInstantFromMillis 等 ,时 钟 的 全 部 方法 如 表 5. 9 所 示 。 


表 5.9 ”时钟 控件 所 支持 的 方法 


方法 名 称 说 明 
SystemTime 获取 手机 系统 时 间 ,单位 微 秒 
Now 获取 当前 的 时 间 点 
Mee 以 “月 /日 /年 时 :分 : 秒 ”“ 月 /日 /年 "“ 时 :分 "的 格式 定 
义 时 间 点 
MakelInstantFromMillis( Number millis) 通过 毫秒 数 定义 时 间 点 
GetMillis(instant) 从 1970 年 到 当前 时 间 所 经 过 的 毫秒 数量 
AddSeconds(instant, Number seconds) 计算 若干 秒 以 后 的 时 间 点 
AddMinutes(instant, Number minutes) 计算 若干 分 钟 以 后 的 时 间 点 


AddHours(instant, Number hours) 


计算 若干 小 时 以 后 的 时 间 点 


AddDays(instant, Number days) 


计算 若干 天 以 后 的 时 间 点 


AddWeeks(instant, Number weeks) 计算 若干 星期 以 后 的 时 间 点 
AddMonths(instant, Number months) 计算 若干 月 以 后 的 时 间 点 
AddYears(instant，Number years) 计算 若干 年 以 后 的 时 间 点 
Duration(Calendar start, Calendar end) 获取 两 个 时 间 点 的 时 间 差 值 ,单位 毫秒 
Second(Calendar instant) 获取 时 间 点 的 秒 

Minute(Calendar instant) 获取 时 间 点 的 分 钟 

Hour(Calendar instant) 获取 时 间 点 的 小 时 


DayOf Month(Calendar instant) 


获取 时 间 点 的 日 期 ,范围 是 1 一 31 的 数字 


Weekday(Calendar instant) 


获取 时 间 点 星期 几 ,范围 是 1( 周 日 ) 一 7( 周 六 ) 的 数字 


WeekdayName(Calendar instant) 


获取 时 间 点 星期 几 , 用 名 称 表述 


Month(Calendar instant) 


获取 时 间 点 的 月 份 ,用 数字 表示 


MonthName(Calendar instant) 


获取 时 间 点 的 月 份 ,用 名 称 表述 


Year(Calendar instant) 获取 时 间 点 的 年 份 
FormatDateTime(Calendar instant) 格式 化 输出 日 期 和 时 间 
FormatDate(Calendar instant) 格式 化 输出 日 期 


FormatTime(Calendar instant) 


格式 化 输出 时 间 
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这 里 显示 时 间 信 息 


当前 时 间 。 一 小 时 以 后 ” 一 天 以 后 


当前 期 年 月 日 


图 5.30 SuperClock 示例 运行 界面 


下 面 通过 SuperClock 示例 ,将 前 面 所 介绍 过 的 
时 间 计 算 、 获 取 显 示 当 前 时 间 点 等 内 容 进行 展示 。 
SuperClock 示例 运行 界面 如 图 5. 30 所 示 , 用 户 单 击 
不 同 按钮 ,将 在 “这 里 显示 时 间 信 息 ” 的 标签 控件 中 显 
示 时 间 信 息 。 

在 界面 设计 图 上 ,可 以 找到 非 可 视 化 模块 
(Non-visible components) 中 的 时 钟 控 件 , 如 图 5. 31 
所 示 。 

SuperClock 示例 的 全 部 逻辑 模块 如 图 5. 32 
所 示 。 

时 钟 的 另 一 种 用 法 是 作为 "定时 器 ” ,按照 固定 的 
时 间 间 隔 反复 产生 触发 事件 (Timer) 。 

时 钟 有 三 个 相关 的 属性 ,如 表 5. 10 所 示 。 
TimerInterval 用 来 设 定 触发 的 时 间 间 隔 , 单 位 为 毫 


秒 。TimerEnabled 控制 着 时 钟 的 运行 ,可 以 通过 修改 TimerEnabled 停止 和 启动 时 钟 工 
作 。TimerAlwaysFires 是 多 次 产生 触发 事件 开关 ,如 果 TimerAlwaysFires 没有 被 选中 ， 
则 产生 一 次 触发 事件 后 ,不 会 继续 产生 触发 事件 ;反之 , 则 会 按照 时 间 间 隔 不 断 地 产生 和 触 


发 事件 。 


C 
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5.31 SuperClock 示例 的 界面 设计 图 
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5.32 SuperClock 示例 全 部 逻辑 模块 


时 钟 只 有 一 个 事件 : 触发 事件 (Timer), 如 图 5. 33 所 示 。 在 时 钟 被 启动 后 
(TimerEnabled) ,经 过 预定 的 时 间 间 隔 (TimerInterval) 后 ,产生 时 钟 的 触发 事件 。 


表 5.10 时 钟 的 属性 


模 式 说 明 
when Clock1.Timer 
Timerlnterval 时 间 间 隔 do 
TimerEnabled 时 钟 启动 开关 
TimerAlwaysFires 多 次 产生 定时 器 事件 开关 5.33 ”时 钟 的 触发 事件 


下 面 通过 TimerClock 示例 介绍 如 何 使 用 时 钟 的 “定时 器 ”功能 ,同时 也 用 到 了 本 节 
介绍 过 的 列表 选项 。TimerClock 示例 的 运行 界面 如 图 5. 34 所 示 。( 注 : TimerClock 示 
例 在 程序 中 使 用 的 沙漏 图 片 素材 来 源 于 http: //www. 


3lian. com/gif/2012/04-24/24667. html.) 计数 器 
在 用 户 单 击 Begin 按钮 时 ,时 钟 开 始 计时 ,并 在 界 

面 上 显示 计时 数字 。 按 钮 显示 的 文字 从 “Begin” 变 为 R j I 

“Stop”, 如 果 再 次 单 击 按钮 ,时 钟 将 停止 计时 。 界 面 下 

方 的 “选择 时 间 间 隔 ( 单 位 毫秒 ) ”列表 选项 ,可 以 控制 时 i 

钟 触发 事件 的 时 间 间 隔 。 在 选择 不 同 的 数值 后 ,计数 器 = 

的 累加 速度 会 直接 被 更 改 , 从 而 反映 在 界面 中 间 的 数值 0 

变化 速度 上 。 列 表 选 项 可 以 选择 的 数字 有 100(0. 1s)、 Begin 

500(0. 552, 1000 (1s) 和 2000(2s)。 界 面 设计 图 如 | RENE HNED) 

图 5.35 所 示 。 计时 器 时 间 间隔 : 1000 


TimerClock 示例 的 逻辑 分 为 4 个 部 分 ,分 别 是 初 图 5.34 TimerClock 示例 运行 界面 
始 化 选项 列表 . 选 后 操作 事件 .时 钟 触 发 事件 和 按钮 单 
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5.35 TimerClock 示例 的 界面 设计 图 


击 事件 。 


第 一 部 逻辑 功能 是 初始 化 列表 选项 。 在 屏幕 页 Screenl 的 Initialize 事件 中 ,为 列表 
选项 ListPickerl 的 Elements 属性 赋值 。 赋 值 的 方法 是 调用 make a list 模块 ,将 文本 
100.500.1000 和 2000 拼接 在 制作 列表 模块 的 槽 item 上 ,如 图 5. 36 所 示 。 


when Screen1.Initialize 


call make a list 


ListPicker1.Elements 


5.36 初始 化 列表 


第 二 部 分 是 列表 的 选 后 操作 事件 的 逻辑 功能 ,如 图 5. 37 所 示 。 在 用 户 选择 列表 选 
项 的 列表 元 素 后 ,产生 选 后 操作 事件 ,此 时 需要 完成 的 功能 是 将 用 户 的 选择 结果 赋值 给 
时 钟 Clock1 的 TimerInterval 属性 ,用 来 修改 时 钟 的 触发 时 间 间 隔 。 同 时 ,将 选择 结果 赋 


值 给 标签 LabelValue 的 Text 属性 ,将 选择 结果 显示 在 用 户 界面 上 。 
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图 5.37 选 后 操作 事件 


第 三 部 分 是 时 钟 触发 事件 的 逻辑 功能 ,如 图 5. 38 所 示 。 在 每 次 时 钟 触发 后 ,修改 标 
签 LabelCount 的 Text 属性 ,将 其 在 数值 上 增加 1, 在 屏幕 上 会 出 现 1”、“2”,“3”、“4”、 
“5”、… 的 计数 信息 递增 效果 。 


图 5.38 时 钟 触发 事件 
第 四 部 分 是 按钮 单 击 事 件 的 逻辑 功能 ,如 图 5. 39 所 示 。 


5.39 按钮 单 击 事件 


首先 定义 一 个 全 局 变量 Running ,表示 时 钟 是 否 开始 计数 ,将 其 赋值 为 false。 在 按 
钮 Buttonl 的 单 击 事件 Click 中 ,判断 全 局 变量 Running 的 值 ,决定 所 作 的 动作 。 
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如 果 Running 为 false, 表 示 时 钟 没有 启动 ,进入 else-do 分 支 。 先 将 Running 赋值 为 
true; 然 后 将 按钮 Buttonl 的 Text 属性 赋值 为 “Stop”, 修 改 按 钮 显示 内 容 为 “Stop”; 然 后 
将 标签 LabelCount 的 属性 Text 赋值 为 0, 相 当 于 清空 计时 器 的 内 容 ; 最 后 将 时 钟 Clockl 
的 TimerEnabled 属性 赋值 为 true, 则 会 立即 启动 时 钟 ,开始 计数 过 程 。 

如 果 Running 为 true, 表 示 时 钟 已 经 启动 ,进入 then-do 分 支 。 则 先 将 Running 赋值 
为 false; 然 后 将 按钮 Buttonl 的 Text 属性 赋值 为 “Begin” ,修改 按钮 显示 内 容 为 *Begin”; 
最 后 将 时 钟 Clockl 的 TimerEnabled 属性 赋值 为 false, 立 即 停止 时 钟 。 

最 后 给 出 TimerClock 示例 的 全 部 逻辑 模块 ,如 图 5. 40 所 示 。 


5.40 TimerClock 示例 全 部 逻辑 模块 


53 E m mm 


在 设计 应 用 程序 时 ,往往 需要 仔细 考虑 不 同 控件 在 界面 上 的 布局 和 构图 效果 ,而 不 
只 是 单纯 地 把 控件 堆积 在 屏幕 上 。 为 了 能 够 设计 出 相对 美观 的 布局 结构 ,App Inventor 
提供 了 屏幕 布局 (Screen Arrangement T fF ,支持 水 平 布 局 E 
直 布 局 和 表格 布局 ,如 图 5. 41 所 示 。 
这 些 布 局 的 作用 是 按照 一 定 顺 序 或 者 相对 关系 ,排列 布局 
内 部 的 其 他 控件 。 布 局 本 身 在 界面 上 没有 任何 显示 ,也 不 具备 
图 5.41 可 视 化 控件 布局 事件 响应 功能 ,因此 布局 并 不 能 响应 单 击 或 拖 动 等 操作 。 即 便 
的 三 种 方式 如 此 ,布局 仍然 是 界面 设计 中 不 可 缺少 的 组 成 部 分 ,是 提升 应 
用 程序 视觉 效果 和 美观 程度 的 关键 所 在 。 
本 节 后 续 的 内 容 将 主要 介绍 布局 的 使 用 ,并 通过 使 用 布局 对 本 章 之 前 的 几 个 示例 进 
行 美 化 和 完善 。 


Screen Arrangement 
Ë ”HorizontalArangement 
EB TableArangement 


[B] vericalAranoement 


ZZ: 
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531 水 平 布局 


水 平 布局 (HorizontalArrangement) 是 一 种 重要 的 界面 布局 ,也 是 经 常 使 用 到 的 界面 
布局 。 在 水 平 布 局 中 ,所 有 的 界面 控件 都 在 水 平方 向 上 按照 顺序 进行 排列 ,也 就 是 说 ,每 
列 仅 包含 一 个 控件 。 

在 图 5. 42 中 ,包含 两 个 水 平 布局 ,上 方 的 水 平 布局 包含 三 个 复 选 框 控件 ， 选 项 1”、 
“选项 2" RI" 363", 下方 的 布局 也 包含 三 个 控件 ,一 个 标签 “提交 与 否 ”, 两 个 按钮 “ 提 
交 ” 和 “放弃 ”。 在 手机 上 运行 的 效果 图 中 ,水 平 布局 是 不 可 见 的 ,但 在 界面 编辑 器 中 ,可 
以 很 容易 地 找到 水 平 布局 的 位 置 ,如 图 5. 43 所 示 。 


Screen] 


选项 | | Jem | ”| 选项 2 EFT 回 选 项 2 D 选项 2 


图 5.42 ”水平 排 布控 件 的 运行 效果 图 图 5.43 水 平 排 布控 件 的 编辑 器 效果 图 


在 控件 库 中 将 水 平 布局 控件 拖 扎 到 界面 编辑 器 后 ,在 界面 上 形成 一 个 正方 形 区 域 ， 
如 图 5.44 所 示 。 将 第 一 个 控件 拖 忠 到 这 个 正方 形 的 区 域 中 ,这 个 正方 形 的 区 域 会 变 成 
长 方形 ,以 后 所 有 加 入 的 控件 都 会 按照 水 平顺 序 排 布 。 需 要 注意 的 是 ,不 要 让 水 平 布局 
中 控件 的 总 尺寸 超出 屏幕 的 显示 范围 。 

水 平 布局 只 有 Visible、AlignHorizontal、Width 和 Height 4 个 属性 。Visible 属性 表 
示 水 平 布局 中 的 控件 是 否 可 见 ,如 果 将 其 设置 为 false, 则 水 平 布 局 中 的 所 有 控件 都 不 可 
见 。AlignHorizontal 表示 布局 中 控件 的 排 布 方式 ,支持 三 种 排 布 方式 : 左 对 齐 、 居 中 对 
齐 和 右 对 齐 。 

水 平 布局 的 例子 可 以 参考 SuperClock 示例 ,其 中 使 用 了 4 个 水 平 布局 ,如 图 5. 45 所 
示 。 上 方 的 两 个 水 平 布 局 主要 利用 了 布局 的 AlignHorizontal 属性 ,将 其 设置 为 居中 对 
F (Center) ,保证 图 片 和 显示 信息 内 容 居 中 表示 。 下 方 的 两 个 布局 ,主要 用 于 水 平 排 布 按 


TANI 5:09PM 


这 里 显示 时 间 信 息 


了 后 | 一 HE | v] 


G 
Es 年 | 月 | 日 | 


5.44 水 平 布局 5.45  SuperClock 示例 


78 Quam z asus 8113 —Ó 8 3 Z B K Qp deris 


£H f fF. Align Horizontal 属性 设置 为 左 对 齐 , 保 证 所 有 按钮 控件 排 布 在 布局 的 左 侧 。 
532 垂直 布局 


垂直 布局 (VerticalArrangement) 中 ,所 有 的 界面 控件 都 在 竖 直方 向 上 按照 顺序 进行 
排列 ,也 就 是 说 ,每 行 仅 包含 一 个 界面 控件 。 

垂直 排列 控件 的 运行 效果 和 在 界面 编辑 器 中 的 效果 如 图 5. 46 所 示 , 这 里 将 两 个 垂 
直 布 局 舱 套 在 一 个 水 平 布局 中 ,就 出 现 了 三 个 垂直 排列 的 控件 组 成 一 组 ,两 个 控件 组 之 
间 是 水 平 排列 关系 。 这 样 的 方式 在 程序 开发 中 经 常会 被 使 用 ,下 面 给 出 SuperClock 示例 
界面 的 垂直 布局 版 本 ,如 图 5.47 所 示 。 


kh f) @ 5:09 PM 
SuperCloc 


提交 与 否 : 
选项 1 


[|] 选项 2 


选项 2 


5.46 垂直 布局 效果 图 5.47 SuperClock 示例 (垂直 布局 版 本 ) 


垂直 布局 的 SuperClock 示例 中 ,7 个 按钮 被 分 为 三 组 ,组 与 组 之 间 是 水 平 排 布 ,组 内 
的 按钮 是 垂直 排列 。 例 如 ,第 一 组 中 “当前 时 间 ” 按 钮 和 "一 小 时 以 后 ”按钮 就 是 垂直 排列 
的 ,第 二 组 中 的 “当前 日 期 ?按钮 和 * 一 天 以 后 ?按钮 也 是 垂直 排列 的 ,但 第 一 组 和 第 二 组 
是 水 平 排列 的 。 


533 表格 布局 


表格 布局 (TableArrangement) 也 是 一 种 常用 的 界面 布局 , 它 将 屏幕 划分 为 表格 , 通 
过 指定 行 (Rows) 和 列 (Columns) 可 以 控制 格子 的 数 
量 。 图 5. 48 是 一 个 2X2 的 表格 布局 示意 图 ,每 个 
格子 可 以 放置 一 个 控件 ,当然 也 可 以 放置 其 他 布局 ， 
如 水 平 布局 或 垂直 布局 ,实现 布局 的 符 套 。 

行 (Rows) 和 列 (Columns) 是 表格 布局 的 专 有 属 
性 ,表示 表格 的 行 数 和 列 数 ,可 以 在 界面 编辑 器 的 属 图 5.48 表格 布局 示意 图 
性 区 内 进行 更 改 , 如 图 5. 49 所 示 。 

还 是 以 SuperClock 示例 为 蓝本 ,制作 该 示例 的 表格 布局 版 本 ,如 图 5. 50 所 示 。 
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5.49 表格 布局 的 属性 Æ 5.50 SuperClock 示例 (表格 布局 版 本 ) 


在 表格 布局 的 SuperClock 示例 中 ,设置 了 一 个 3X3 的 表格 ,将 7 个 按钮 排 布 在 9 个 格 
子 中 。 表 格 布局 会 根据 控件 的 大 小 ,自动 修改 表格 的 大 小 ,这 是 一 个 方便 、 实 用 的 功能 。 


54 媒体 控件 


随 着 Android 应 用 程序 的 不 断 丰 富 ,音频 播放 ,视频 的 录制 与 播放 .音效 播放 ,以 及 
图 片 选 取 等 多 媒体 功能 已 成 为 应 用 开发 中 不 可 或 缺 的 部 分 。App Inventor 的 媒体 控件 
支持 对 音频 .视频 和 图 片 的 操作 ,全 部 的 媒体 控件 如 图 5. 51 所 示 。 

本 节 所 涉及 的 内 容 包括 录像 机 、 选 图 工具 .音频 播放 器 和 视频 播放 器 ,相机 和 音效 播 
放 器 将 在 后 续 章 节 进 行 介绍 ,各 媒体 控件 的 名 称 和 功能 说 明 如 表 5. 11 所 示 。 


表 5.11 媒体 控件 功能 


控 件 说 明 
Camcorder 录像 机 ,用 于 录制 视频 
=== Camera 相机 ,用 于 拍摄 相片 
@ camera ImagePicker 选 图 工具 ,用 于 在 相册 中 选取 图 片 
BS ImagePicker È 
B» Player 5 Player 音频 播放 器 ,用 于 播放 音频 文件 或 产生 手机 振动 
co ° Sound 音效 播放 器 ,用 于 播放 短 时 间 的 音效 文件 
图 5.51 媒体 控件 VideoPlayer 视频 播放 器 ,用 于 播放 视频 
541 录像 机 


录像 机 控件 (Camcorder) 的 功能 是 利用 手机 摄像 头 录 制 视频 。 录 像 控 件 为 非 可 视 化 
控件 ,不 在 界面 上 显示 ,也 没有 可 编辑 的 属性 ,如 图 5. 52 所 示 。 
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录像 机 控件 简单 易 用 , 只 提供 一 个 RecordVideo 方法 (录制 视频 ) 和 一 个 
AfterRecording 事件 (视频 录制 后 ) ,如 图 5.53 所 示 。 


call Camcorder1.RecordVideo | 


when Camcorder1.AfterRecording clip [` name clip 
Non-visible components do 


—————AC 


图 $.52 非 可 视 化 的 录像 机 控件 图 5.53 录像 机 控件 支持 的 方法 和 事件 


RecordVideo 方法 启动 手机 摄像 头 的 录制 功能 ,一 般 手机 的 录制 过 程 会 被 手机 内 置 
的 “录像 (照相 ) 软 件 ” 所 接管 ,笔者 的 手机 “录像 (照相 ) 软 件 ” 如 图 5. 54 所 示 。 在 录制 成 
功 后 ,可 以 选择 “放弃 ”或 “存储 ”, 如果 选 择 " 放 弃 ” 则 这 次 录制 过 程 将 取消 ,如 果 选 择 “ 存 
f" ,存储 路 径 等 信息 会 在 AfterRecording 事件 中 被 获取 到 。 


5.54 ”笔者 手机 内 置 的 “录像 (照相 ) 软 件 ” 


AfterRecording 事件 在 录像 过 程 结束 时 产生 ,主要 功能 是 提供 录像 视频 的 存储 路 
径 ,信息 保存 在 clip 参数 中 。 


542 视频 播放 器 


视频 播放 器 控件 (VideoPlayer) 主要 用 于 播放 视频 文件 ,提供 基础 的 视频 播放 控制 功 
能 ,包括 播放 .暂停 .调整 播放 位 置 等 。 视 频 播 放 器 在 界面 编辑 器 中 显示 为 矩形 , 如 
图 5. 55 所 示 。 
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视频 播放 器 中 最 重要 的 属性 是 Source, 用 来 设 定 所 播放 的 视频 文件 。 视 频 播放 器 支 
持 主流 的 媒体 文件 类 型 ,包括 Windows Media Video(. wmv) .3GPP(. 3gp) 和 MPEG-4(. 
mp4)。 但 要 注意 的 是 ,应 用 程序 中 包含 视频 文件 ,应 通过 截取 片段 或 者 压缩 等 方式 尽量 
缩小 体积 。 

视频 播放 器 仅 支持 Completed (播放 完成 ) 事 件 ,在 播放 到 视频 文件 结尾 时 产生 ， 
Completed 事件 模块 如 图 5. 56 所 示 。 


"^en VideoPlayer1.Completed 
do 
5 


A 5.55 界面 编辑 器 中 的 视频 播放 器 A 5.56 Completed( 播 放 完成 ) 事 件 


视频 播放 器 支持 Start、Pause、SeekTo 和 GetDuration 方法 ,可 以 调用 这 些 方法 控制 
视频 播放 过 程 。 视 频 播放 器 所 支持 的 方法 如 表 5.12 所 示 。 
表 5.12 视频 播放 器 的 方法 


行为 说 明 行为 说 明 
Start 开始 播放 视频 文件 Bue. PERRO POMONA HUE NAM 
位 毫秒 ) 
Pause 暂停 播放 当前 视频 GetDuration | 返回 视频 的 持续 时 间 ( 单 位 毫秒 ) 
在 视频 播放 器 上 单 击 播放 画面 ,可 以 弹出 “视频 控制 界面 ”, 使 用 内 置 的 “视频 控制 界 


面 " 可 以 在 一 定 程度 上 减轻 开发 工作 ,如 图 5. 57 所 示 。 

下 面 将 在 RecordPlayer 示例 中 ,展示 如 何 使 用 录像 机 和 视频 播放 器 ,制作 一 个 可 以 
使 用 手机 摄像 头 进行 录像 ,并 可 以 直接 播放 录像 内 容 的 应 用 程序 。RecordPlayer 示例 的 
运行 界面 如 图 5. 58 所 示 。 


摄像 播放 器 


摄像 播放 停止 


显示 播放 器 信息 


< Ls > 


00:00 BT B 00:05 


图 5.57 视频 控制 界面 图 5.58  RecordPlayer 示例 运行 界面 


82 Quam z asus q t 3— d 8 3 Z B K Qp donin 


RecordPlayer zn A ii E 89 76 # ñ S BH T “R” O Dk 1 I IE” — T Ez H SE Bl 
了 应 用 程序 的 主要 功能 ,反馈 信息 在 标签 "显示 播放 器 信息 ”中 显示 ,如 图 5.59 所 示 。 


Viewer Components 


€ e Dscun 


e E rorizontaiarrangementt 


Display hidden components in Viewer 


BME 509 PM [AJLaberrite 


ÉSvideoPlayert 


日 图 HornzonaArangement2 


摄像 播放 器 | | 
= a ButtonPlay 


国 Butonstop 


[AJLabetnto 


和 camcoen 


me | a | fr j 
显示 播放 器 信息 


[Rename || Delete 


Non-visible components Upload new. 


Camcorder1 


5. 59 RecordPlayer 示例 界面 示意 图 


在 RecordPlayer 示例 的 界面 示意 图 中 ,很 容易 找到 非 可 视 化 的 摄像 机 控件 
Camcorderl 和 可 见 的 视频 播放 器 控件 VideoPlayer1 ,如 图 5. 60 所 示 。 


wn ButtonRecord.Click We Camcordert.ARerRecording enp (> rone on 
ao fean 
Camcorder1.RecordVideo P to 


一 


text 
to L ' Recod Done 


5.60 Click 事件 和 AfterRecording 事件 


逻辑 部 分 首先 要 在 “摄像 "ButtonRecord) 按 钮 的 单 击 事件 中 调用 摄像 机 Camcorder1 的 
RecordVideo 方法 ,调用 手机 的 摄像 功能 。 在 摄像 完毕 后 (AfterRecording) 将 视频 文件 信息 
传递 给 视频 播放 器 VideoPlayerl 的 属性 Source。 此 时 ,视频 播放 器 VideoPlayerl 已 经 获得 
要 播放 视频 的 路 径 信息 ,只 要 调用 视频 播放 器 的 Start 方法 ,就 可 以 播放 这 个 视频 文件 。 

其 次 ,要 响应 “播放 ”按钮 (ButtonPlay) 和 “停止 ?按钮 (ButtonStop ) 的 单 击 事件 ， 
如 图 5. 61 所 示 。“ 播 放 ” 按 钮 要 调用 视频 播放 器 VideoPlayerl 的 Start 方法 播放 视频 ,并 
将 视频 的 长 度 信息 (GetDuration) 显 示 在 标签 LabelInfo 中 。“* 停 止 ” 按 钮 会 调用 视频 播放 
器 VideoPlayerl 的 Stop 方法 暂停 视频 播放 ,如 果 再 次 单 击 “ 播 放 ” 按 钮 ,视频 将 在 上 次 暂 
停 的 地 方 继续 播放 。 
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图 5.61 “播放 "按钮 和 “停止 "按钮 的 单 击 事件 


最 后 就 是 在 视频 播放 器 完成 播放 后 ,在 标签 LabelInfo 中 显示 “Play Done” 信 息 。 方式 
是 在 视频 播放 器 的 Completed 事件 中 ,修改 标签 LabelInfo 的 Text 属性 ,如 图 5. 62 所 示 。 


图 5.62 视频 播放 器 的 Completed 事件 


RecordPlayer 示例 的 全 部 逻辑 模块 如 图 5. 63 所 示 。 


图 5.63  RecordPlayer 示例 全 部 逻辑 模块 


543 选 图 工具 


选 图 工具 (ImagePicker) 能 实现 从 手机 的 相册 中 选取 图 片 的 功能 。 选 图 工具 在 界面 

上 的 显示 外 观 类 似 于 按钮 ,如 图 5. 64 所 示 , 当 用 户 单 击 

选 图 工具 时 ,就 会 调用 手机 内 置 的 “相册 软件 ”, 浏 览 手机 

内 部 保存 的 图 片 ,进而 从 中 选择 需要 的 图 片 。 — MNEN 
选 图 工具 的 Image 属性 用 来 表示 选择 的 图 片 ， 

Selection 属性 则 以 字符 串 的 形式 保存 图 片 文件 的 路 径 信息 。 


选 图 工具 支持 4 种 事件 : 选 图 前 事件 、 选 图 后 事件 、 获 取 焦 点 事件 和 失去 焦点 事件 ， 
如 表 5.13 所 示 。 
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表 5.13 选 图 工具 事件 


F 件 说 明 事 件 说 明 
BeforePicking 选 图 前 事件 GotFocus 获取 焦点 事件 
AfterPicking 选 图 后 事件 LostFocus 失去 焦点 事件 


选 图 工具 只 支持 Open 方法 ,用 来 打开 手机 内 置 的 “相册 软件 ”。 
544 音频 播放 器 


音频 播放 器 (Player) 用 来 播放 音频 文件 ,一 般 用 于 播放 时 间 较 长 的 音频 文件 ,如 音 
乐 .录音 等 。 如 果 时 间 较 短 的 音频 ,如 铃声 ,提示 音 , 则 多 用 音效 播放 器 进行 播放 ,因为 音 
效 播放 器 的 资源 消耗 较 少 。 

音频 播放 器 除了 具有 音频 播放 功能 外 ,还 可 以 让 手机 产生 振动 。 音 频 播放 器 属于 非 
可 视 化 控件 ,并 不 在 界面 内 显示 。 在 界面 编辑 器 中 的 音频 播放 器 如 图 5. 65 所 示 。 

音频 播放 器 支持 4 个 属性 : IsLooping、IsPlaying、Source 和 Volume, Source 属性 用 
来 定义 音频 文件 源 , 可 以 是 上 传 的 音频 文件 ,也 可 以 是 网 络 中 的 音频 文件 。 音 频 播放 器 
支持 常见 的 mp3、wav、mid 和 3gp 等 音频 格式 。 

Volume 表示 播放 音量 ,是 0 一 100 的 整数 ,数值 越 大 ,音量 越 大 。 音 频 播 放 的 属性 如 
K 5.14 所 示 。 

音频 播放 器 唯一 支持 的 事件 是 Completed, 如 图 5. 66 所 示 。Completed 事件 在 音频 
播放 完成 后 产生 ,通常 用 于 执行 播放 完毕 后 的 下 一 步 动作 。 

表 5.14 音频 播放 的 属性 


属 性 说 明 
IsLooping 是 否 循环 播放 
Non-visible components IsPlaying 是 否 正在 播放 when Player1.Completed 
playert Source 音频 文件 源 » 
5.65 音频 播放 器 Tas Fura 


5.66 Completed 事件 


音频 播放 器 支持 Start Pause, Stop 和 Vibrate 4 种 方法 ,用 于 开始 和 暂停 音频 播放 ， 
以 及 控制 手机 振动 。 音 频 播 放 器 支持 的 全 部 方法 如 表 5. 15 所 示 。 
表 5.15 音频 播放 器 的 方法 


方 法 描 x 方 法 描 述 
Pause 暂停 当前 播放 Stop 停止 播放 
Start 开始 播放 Vibrate 手机 振动 


Vibrate 方法 会 让 手机 产生 一 段 时 间 的 振动 ,振动 时 间 由 参数 milliseconds 控制 , 单 
位 是 毫秒 ,如 图 5.67 所 示 。 
下 面 将 通过 MusicGallery 示例 ,尝试 如 何 使 用 选 图 工具 和 音乐 播放 器 控件 设计 应 用 
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程序 。MusicGallery 示例 实现 的 功能 类 似 于 音乐 相册 ,在 播放 背景 音乐 的 同时 ,循环 显 
示 用 户 选择 的 两 张 图 片 。 

MusicGallery 示例 的 运行 界面 如 图 5. 68 所 示 。 用 户 需 要 单 击 “选取 照片 ”按钮 两 
次 ,利用 选 图 工具 在 手机 内 置 的 图 片 库 中 选取 两 张 图 像 文件 。 在 选 前 第 一 张 图 片 前 , 界 
面 上 显示 红色 的 提示 语 “Please pick first picture!”, 在 用 户 选择 好 第 一 张 图 片 后 ,提示 语 
变 为 “Please pick second picturel”。 在 用 户 将 两 个 图 片 都 选 好 后 ,提示 语 将 变 为 蓝 色 
“Ready1”, 表 示 可 以 单 击 “ 启 动 相册 ”按钮 ,开始 真正 的 “音乐 相册 ”之 旅 。 在 用 户 未 单 击 
“停止 相册 ”按钮 前 ,将 持续 播放 音乐 和 循环 显示 图 片 。 


音乐 画册 


call milliseconds 
Player1.Vibrate L 选取 照片 启动 相册 停止 相册 
5.67 Vibrate 方法 5.68 MusicGallery 示例 的 运行 界面 


MusicGallery 示例 的 界面 设计 图 如 图 5. 69 所 示 。 


Viewer Components 


EI p 


A| Laverite 


Display hidden components in Viewer : 
Ë macei 


A)Lavennio 
日 M horizontaiarangement1 
E magePickeri 
国 Butonpay 
国 8utonstop 
> Player 
Y com 


Please pick first picture! 


xxm^ | — mmm | (PHBM 


Rename || Delete 


Media 
Non-visible components music.mid 
= = 


mus. images jpg. 
Upload new. 


» 5 
Player1| ciock1 


5.69 MusicGallery 示例 的 界面 设计 图 
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在 界面 设计 过 程 中 ,要 注意 将 “启动 相册 ”和 “停止 相册 ”按钮 的 Enabled 项 设 为 
false, 只 允许 用 户 在 选择 完 两 张 图 片 后 才 可 以 启动 相册 。 

将 时 钟 Clockl 的 Enabled 项 设 为 false, 让 时 钟 在 用 户 单 击 “ 启 动 相册 ” 按 钮 以 后 才 
启动 ,因为 时 钟 的 主要 作用 是 周期 性 地 切换 图 片 。Clockl fS [8] [8] Bá C TimerIntervaD ix 
置 为 10 000ms(10s) ,TimeAlwaysFires 设置 为 true。 

音频 播放 器 Playerl 的 Source 属性 设置 为 已 经 上 传 的 MIDI 音频 文件 ,读者 也 可 以 
选择 自己 喜欢 的 音频 ,但 需要 控制 文件 的 大 小 ,避免 资源 文件 的 上 传 时 间 过 长 。 音 频 播 
放 器 的 IsLooping 属性 应 设置 为 true, 因 为 这 里 需要 无 限 循环 播放 背景 音乐 。 但 笔者 发 
现在 界面 编辑 器 中 设置 的 IsLooping 属性 并 不 生效 ,需要 在 逻辑 编辑 器 中 ,将 IsLooping 
属性 初始 化 工作 放 在 屏幕 页 Screenl 的 Initialize 事件 中 完成 才能 生效 ,如 图 5. 70 所 示 。 

在 逻辑 编辑 器 中 ,首先 定义 三 个 全 局 变量 Status, Picturel 和 Picture2 ,如 图 5. 71 所 
示 。Picturel 和 Picture2 表示 用 户 选择 的 两 个 图 像 。 

Status 则 表示 程序 所 处 的 状态 。 当 程序 刚刚 初始 化 完毕 ,用 户 还 没有 进行 任何 操作 
时 ,程序 处 于 的 状态 为 0; 当 用 户 选 择 完 第 一 张 图 片 后 ,程序 处 于 的 状态 为 1; 当 用 户 选 择 
完 第 二 张 图 片 后 ,程序 处 于 的 状态 为 2。 全 局 变量 Status 以 此 来 标识 用 户 是 否 已 将 两 张 
图 片 选取 好 了 。 用 户 单 击 * 启 动 相 册 ” 按 钮 后 ,时 钟 触 发 事件 会 将 Status 在 1 和 2 之 间 切 
换 , 此 时 的 全 局 变量 Status 主要 用 来 控制 切换 显示 图 像 。 在 用 户 单 击 “ 停 止 相册 ”按钮 
后 ,Status 变 为 0, 

用 户 操作 的 第 一 步 是 要 选择 两 张 图 片 ,在 选 图 工具 ImagePickerl 的 AfterPicking 事 
件 中 ,将 选择 的 图 片 分 别 赋值 给 全 局 变量 Picturel 和 Picture2 ,并 修改 提示 信息 的 内 容 和 
颜色 。 在 完成 两 张 图 片 的 选取 后 ,通过 修改 “启动 相册 ”按钮 的 Enable 属性 为 true. 允许 
用 户 单 击 该 按钮 。ImagePickerl 的 AfterPicking 事件 的 逻辑 功能 如 图 5. 72 所 示 。 


Me ImagePicker1.AfterPicking 


et 
f Labellnfo.Text te Í, ` Please pick second picture! 


when Screent.lnitialize 
do E = 
m s Labelinfo.TextColoi 
Player1.IsLooping true slinfo. TextColor 


5.70 屏幕 页 Screenl 的 Initialize 事件 


GZ 
a m 
Picture2 ImsgePickerl.Selection. 


set globai to ( rumoer 
ati 2 


set "e 
ButtonPlay.Enabled true 


set "° 
EE, ber ImagePicker1.Enabled false 
set To text 
Labelinfo.Text Ready! 
def as (7 tex 
AE Pictures text set to (7 coor 
Labelinfo.TextColor. Cyan 
def as (7 te 
^  Picture2 text 


图 5.71 定义 全 局 变量 5.72 ImagePicker1 的 AfterPicking 事件 
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用 户 操作 的 第 二 步 是 通过 单 击 “ 启 动 相册 ”按钮 ,启动 音频 播放 器 Playerl 音频 
播放 功能 ,这 里 通过 调用 Playerl 的 Start 方 法 实现 。 w 
将 全 局 变量 Picturel 赋 给 图 像 控 件 Imagel 的 Picture & -一 
属性 ,这样 就 可 以 在 图 像 控 件 中 显示 用 户 选择 的 第 一 
WEJ. 

在 “启动 相册 ”按钮 的 单 击 事件 中 ,还 需要 修改 提示 
信息 的 内 容 和 颜色 ,并 将 自身 设置 为 灰色 的 不 可 单 击 状 
Æ (Enabled 属性 为 false) ,将 “停止 相册 ”按钮 设置 为 可 
以 单 击 的 状态 (Enabled 属性 为 true), 

还 有 一 件 非常 重要 的 工作 ,就 是 启动 时 钟 ,方法 依旧 
是 将 时 钟 Clock1 的 TimerEnabled 属性 设置 为 true, 

ButtonPlay 按钮 的 Click 事件 的 逻辑 如 图 5. 73 
所 示 。 


to (7. global 


set 
Image1.Picture Picture1 

Set to text 
Labellnfo.Text 


set to 
Labelinfo.TextColor 


set to 
Clock1.TimerEnabled 


set to 
ButtonStop.Enabled 

set to 
ButtonPlay.Enabled 


图 5.73  ButtonPlay 按钮 的 
Click 事件 


因为 TimeAlwaysFires 属性 被 设置 为 true, 所 以 时 钟 Clockl 启动 后 会 持续 产生 
Timer 事件 。 在 Timer 事件 中 ,通过 修改 全 局 变量 Status ee 
二 张 图 ,切换 的 时 间 间 隔 是 10s, 如 图 5.74 所 示 。 

用 户 操 作 的 第 三 步 是 通过 单 击 “ 停 止 相册 ”按钮 ,停止 音乐 播放 ,停止 图 片 切换 和 和 暂 
停 时 钟 Clock1 ,逻辑 功能 如 图 5.75 所 示 。 


Wen clock1.Timer "ben ButtonStop.Click 


do do 
ifel et 
CS b aia Ü amb l| Image1.Picture y 
thon-do ES uua 
9! Pictureg 

else.do (BB ENP ass 

Image1.Picture Picture1 

set global to [` number 
Status 2 

5.74 时 钟 Clockl 的 Timer 事件 5.75 ButtonStop 按钮 的 Click 事件 


停止 音乐 播放 是 调用 Playerl 的 Pause 方法 。 这 里 没有 使 用 Stop 方法 ,因为 使 用 
Stop 方法 后 会 引发 异常 ,而 且 音 乐 要 在 用 户 再 次 单 击 “ 启 动 相册 ”按钮 时 继续 播放 ,所 以 
使 用 Pause 方法 更 加 适合 。 

将 图 像 控 件 Imagel 的 Picture 属性 赋值 为 空 , 则 可 以 清空 图 像 控 件 上 所 显示 的 
图 片 。 

MusicGallery 示例 的 全 部 逻辑 模块 如 图 5. 76 所 示 。 
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5.76 MusicGallery 示例 的 全 部 逻辑 模块 


55 社交 控件 


时 至 今日 ,手机 的 用 途 早已 不 仅 局 限于 单纯 的 打 电 话 , 其 社交 功能 也 成 为 基本 功能 
之 一 。App Inventor 的 社交 控件 支持 拨打 电话 ,发 送 短信 和 选取 
Bl ContadPicker 5| 联系 人 等 功能 ,全 部 的 社交 控件 如 图 5.77 所 示 。 
"1 er. š 需要 注意 的 是 ,在 PhoneCell 和 Texting 控件 的 使 用 过 程 中 ， 
HË poewumoepeer o| 可 能 会 产生 一 定 的 通话 费用 。 并 且 , 社 交 控 件 会 从 手机 的 联系 人 
: Mer : 中 获得 真实 信息 ,因此 在 软件 开发 和 调试 过 程 中 ,不 要 干扰 到 他 人 
图 5.77 社交 控件 "Mc 
在 表 5.16 中 给 出 了 社交 控件 的 具体 功能 说 明 。 因 为 防火 墙 
对 国内 出 境 数据 的 选择 性 过 滤 等 原因 ,Twitter 控件 可 能 暂时 无 法 使 用 ,因此 本 书 中 将 暂 
不 介绍 Twitter 控件 的 使 用 方法 。 


表 5.16 社交 控件 功能 


io 件 说 HH 
ContactPicker 打开 手机 的 电话 德 ,选取 联 系 人 信息 
EmailPicker 辅助 用 户 完成 电子 邮件 地 址 输入 
PhoneCell 拨打 电话 
PhoneNumberPicker 打开 手机 的 电话 德 ,选取 联系 人 电话 号 码 
Texting 发 送 短信 息 
Twitter 可 以 与 Twitter 通信 的 非 可 视 化 控件 
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551 选取 联系 人 


选取 联系 人 (ContactPicker) 控 件 的 功能 是 让 用 户 从 手机 的 通讯 录 中 获得 联系 人 信 
息 , 这 些 信息 包括 联系 人 的 姓名 、 头 像 和 电子 邮件 地 址 。ContactPicker 在 界面 上 的 显示 
效果 与 按钮 相同 ,如 图 5.78 所 示 。 

当 用 户 单 击 ContactPicker 后 ,手机 的 通讯 录 会 被 打开 , 联 Text for ContactPicker1 
系 人 会 以 列表 的 形式 呈现 ,在 选择 目标 联系 人 后 ,通讯 录 会 自 
动 关 闭 ,此 时 联系 人 的 信息 将 被 保存 在 ContactPicker 中 。 

ContactPicker 的 其 他 外 观 属性 ,如 字体 .尺寸 .是 否 可 见 等 属性 和 按钮 控件 的 性 格 属 
性 相同 ,其 所 支持 的 专 有 属性 如 表 5.17 所 示 。 

ContactPicker 支持 AfterPicking 事件 、BeforePicking 事件 、GotFocus 事件 和 
LostFocus 事件 ,事件 说 明 如 表 5. 18 所 示 。 


5.78 联系 人 选取 工具 


表 5.17 ContactPicker 属性 表 5.18 ContactPicker 事件 
属 性 说 明 事件 说 m" 
AfterPicking 选择 后 事件 ,在 用 户 选 择 目 标 联系 
ContactName 联系 人 姓名 人 后 产生 
BeiorePickiug 选择 前 事件 ,在 用 户 打开 通讯 录 , 但 
EmailAddress 联系 人 邮箱 是 尚未 选择 目标 联系 人 时 产生 


GotFocus 获取 焦点 事件 
LostFocus 失去 焦点 事件 


Picture 联系 人 头像 


将 ContactPicker 和 标签 .文本 框 等 控件 结合 就 可 以 组 成 简单 的 电话 短 应 用 程序 。 
除 此 之 外 ,还 可 以 利用 ContactPicker 的 返回 结果 ,为 其 他 应 用 提供 信息 ,如 语音 留言 、 自 
动 拨号 和 定义 联系 人 信息 等 。 


552 选取 号 码 


选取 号 码 (PhoneNumberPicker) 可 以 获取 手机 通讯 录 中 的 联系 人 信息 ,这 些 信息 包 
括 联 系 人 的 姓名 、 头 像 、 电 子 邮 件 地 址 和 电话 号 码 。 选 取 号 码 
控件 如 图 5.79 所 示 。 

图 5.79 选取 号 码 控件 选取 号 码 控 件 的 显示 效果 、 属 性 、 事 件 和 工作 方式 , 均 与 
ContactPicker 相同 ,区 别 在 于 选取 号 码 控件 将 多 获取 一 项 数 


Text for PhoneNumberPicker1 


据 : 电话 号 码 。 
二 者 在 通讯 录 中 选择 联系 人 的 界面 也 稍 有 区 别 ,ContactPicker 显示 的 是 联系 人 的 姓 
名 列表 ,而 PhoneNumberPicker 使 用 的 则 是 “姓名 十 电话 ”列表 ,如 图 5. 80 所 示 。 


553 邮件 地 址 工具 


邮件 地 址 工具 (EmailPicker) 在 用 户 输入 联系 人 的 电子 邮件 地 址 时 ,提供 自动 完成 邮 
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M 选择 联系 人 M 选择 联系 人 
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图 5.80 选取 信息 的 区 别 


件 地 址 输入 的 功能 。 通 常 ,邮件 地 址 工具 与 按钮 控件 同时 使 用 ,在 用 户 单 击 按钮 控件 后 ， 
自动 完成 邮件 地 址 的 输入 和 显示 。 

邮件 地 址 工具 在 界面 上 的 显示 效果 类 似 于 文本 框 ,没有 控件 方法 , 仅 有 获取 焦点 事 
件 和 失去 焦点 事件 。 除 Text 和 Hint 属性 之 外 ,其 余 用 于 设置 外 观 效 果 等 的 属性 和 文本 
框 控 件 类 似 ,这 里 不 再 重复 叙述 。 邮 件 地 址 工具 在 界面 上 的 显示 效果 如 图 5.81 所 示 。 


554 拨号 


拨号 控件 (PhoneCell) 是 一 个 非 可 视 化 控件 ,用 于 向 指定 的 电话 号 码 拨打 电话 ,如 图 
5.82 所 示 。 

拨号 控件 只 有 一 个 属性 PhoneNumber 和 一 个 方法 MakePhoneCall。 

PhoneNumber 属性 中 保存 着 目标 电话 号 码 , 此 属性 可 以 在 界面 编辑 器 中 设 定 ,也 可 
以 在 模块 编辑 器 中 定义 和 修改 。 

MakePhoneCall 方法 (图 5.83) 会 调用 手机 的 拨号 界面 ,然后 自动 拨打 
PhoneNumber 属性 中 的 电话 号 码 。 如 果 PhoneNumber 属性 中 没有 设 定 任何 电话 号 码 ， 
MakePhoneCall 方法 将 不 会 被 执行 。 


Non-visible components 
Hint for EmailPicker1 n call 
PhoneCal PhonecCall1.MakePhoneCall 


图 5.81 邮件 地 址 工具 图 5.82 拨号 控件 图 5.83  MakePhoneCall 方法 


拨号 控件 通常 与 选取 号 码 控件 结合 使 用 。 其 通常 的 使 用 方法 是 将 选取 号 码 控件 中 
获得 的 电话 号 码 , 赋 值 给 拨号 控件 的 PhoneNumber 属性 ,然后 再 调用 拨号 控件 的 
MakePhoneCall 方法 拨打 电话 。 
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555 短信 息 


短信 息 控件 (Texting) 主 要 用 来 发 送 和 接收 短信 息 。 短 信息 控件 也 是 非 可 视 化 控 
件 , 在 界面 编辑 器 中 的 效果 如 图 5. 84 所 示 。 

短信 息 控件 的 主要 属性 如 表 5. 19 所 示 。 其 中 ,GoogleVoiceEnabled 属性 表示 是 否 
启动 GoogleVoice 功能 。 如 果 用 户 有 GoogleVoice 账号 ,短信 息 将 利用 WiFi 网 络 ,通过 
GoogleVoice 进行 发 送 。PhoneNumber 属性 表示 发 送 短信 的 目标 电话 号 码 , 形 式 是 一 组 
数字 ,如 18600001111 ,但 不 能 包含 标点 符号 和 空格 。 


表 5.19 短信 息 控件 的 属性 


属 性 说 明 
GoogleVoiceEnabled 是 否 人 允许 使 用 谷歌 语音 功能 
Nonii components Message 发 送 的 短信 息 内 容 
m PhoneNumber 目标 电话 号 码 
Texting1 
5.84 gm ReceivingEnabled 是 否 允 许 应 用 接收 短信 息 


ReceivingEnabled 属性 有 三 个 可 选 值 : 数值 1 ,表示 忽略 接收 短信 息 功能 ;数值 2, 表 
示 程 序 运行 时 才 会 接收 短信 ;数值 3 ,表示 后 台 接 收 短信 ,即使 程序 已 经 退出 , 仍 会 接收 短 
信 。 后 台 接 收 短信 后 ,手机 就 会 在 通知 栏 内 显示 一 条 通知 ,选择 此 通知 后 ,程序 会 自动 被 
切换 到 前 台 。 

短信 息 控件 支持 MessageReceived 事件 ,在 接收 到 短信 息 后 产生 ,可 以 提取 短信 发 送 
方 的 号 码 和 短信 息 内 容 , 如 图 5. 85 所 示 。 

短信 息 控 件 支持 SendMessage 方法 (图 5. 86), 用 来 发 送 短信 息 ,目标 电话 号 码 在 
PhoneNumber 属性 中 ,发 送 内容 在 Message 属性 中 。 


when Texting1.MessageReceived number (^ name 
number 


name 


messageText 
messageText 


do 


call 
Texting1.SendMessage 


Æ 5.85 MessageReceived 事件 图 5.86 SendMessage 方法 


TE FK ,通过 PhoneBook 示例 实际 应 用 社交 控件 ,制作 一 个 简单 的 通讯 录 应 用 。 

PhoneBook 示例 利用 选取 号 码 控件 在 电话 德 中 选取 目标 联系 人 的 电话 号 码 , 然 后 使 
用 短信 息 控件 和 拨号 控件 对 此 号 码 发 送 短信 息 或 拨打 电话 。 需 要 注意 的 是 ,由 于 此 示例 
使 用 了 手机 间 的 通信 功能 ,所 以 需要 使 用 实体 手机 进行 调试 。 

通讯 录 是 手机 中 使 用 最 为 频繁 的 软件 ,一 般 按 照 联 系 人 名 字 的 字母 顺序 排列 ,可 以 
显示 联系 人 的 姓名 ,头像 .手机 号 和 电子 邮件 地 址 等 信息 ,如 图 5. 87 所 示 。 用 户 选择 联 
系 人 后 ,可 以 拨打 电话 或 发 送 短信 。 通 讯 录 的 数据 信息 保存 在 手机 的 数据 库 中 ,一 般 通 
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过 共享 机 制 ,允许 其 他 软件 读 取 数 据 库 中 的 联系 人 信息 。 

PhoneBook 示例 是 一 个 简化 的 通讯 录 , 通 过 读 取 数据 库 中 的 联系 人 信息 ,可 以 显示 
联系 人 的 姓名 .电话 和 头像 ,并 支持 拨打 电话 ,发 送 接收 短信 息 的 功能 。PhoneBook 示例 
的 运行 界面 如 图 5. 88 所 示 。 


se ° * 
Q 查找 联系 人 
REHITA 9 
A 
H à 
5 
韩 梅 梅 6 
i 
L 1 我 的 电话 本 
M 
ion) FE 
A i: 
a 
林涛 3 
A 1 选取 联系 人 打 电 话 RES 
w 写 短信 内 容 
Me” 露 西 I 填写 短信 内 容 
显示 联系 人 信息 
接收 到 的 短信 息 
5.87 手机 通信 录 5.88  PhoneBook 示例 运行 界面 


单 击 “ 选 取 联 系 人 ”按钮 ,将 弹出 手机 内 置 的 联系 人 选择 界面 ,如 图 5. 89 所 示 , 供 用 
户 选 择 目 标 联 系 人 。 

选择 “ 李 雷 ”这 个 联系 人 后 ,PhoneBook 示例 运行 界面 将 跳 转 回 启动 时 的 主页 面 ,此 
时 “ 李 雷 ”的 头像 姓名 和 电话 已 经 显示 在 界面 上 ,如 图 5.90 所 示 。 


r 选择 联系 人 PhoneBook 
- 我 的 电话 本 
TE # 
18600001111 手机 ñ 
c 
林涛 D J 
18600003333 手机 E 
选取 联系 人 打 电 话 ”发 短信 
G | 
2A H id asa] 
18600004444 手机 i 填写 短信 内 容 
韩 梅 梅 x E. 18600001111 
18600002222 手机 M 接收 到 的 短信 息 
图 5.89 手机 内 置 的 联系 人 选择 界面 图 5.90 包含 “ 李 雷 ”信息 的 界面 


此 时 单 击 “ 打 电话 ”按钮 ,将 直接 呼叫 李 雷 的 电话 号 码 , 也 可 单 击 “ 发 短信 ”按钮 ,将 文 
本 框 中 的 内 容 发 送 到 李 雷 的 电话 号 码 上 。 需 要 注意 的 是 ,拨打 电话 和 发 送 短信 会 产生 一 
定 的 通信 费用 。 

在 PhoneBook 示例 的 界面 示意 图 中 ,包含 两 个 非 可 视 化 控件 Textingl 和 
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PhoneCalll ,如 图 5.91 所 示 。AfterPicking 事件 如 图 5.92 所 示 。 
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5.91 PhoneBook 示例 界面 示意 图 


def as[ text 
^  phoneNum 


wnai PhoneNumberPicker1.AfterPicking 


PhoneNumberPicker1.ContactName | 
text (^ text 


PhoneNumberPicker1.PhoneNumber | 


set 
PhoneNumberPicker1.Picture 


PhoneNumberPicker1. PhoneNumber 


5.92 AfterPicking 事件 


PhoneNumberPicker 控件 被 单 击 后 ,会 自动 出 现 * 联 系 人 选择 界面 ", 因 此 无 须 处 理 
该 控件 的 单 击 事件 。 但 一 般 都 会 在 AfterPicking 事件 中 ,保存 或 者 显示 目标 联系 人 的 相 
关 信 息 。PhoneBook 示例 中 ,将 联系 人 的 头像 Picture 赋值 给 图 像 控件 Imagel 的 Picture 
属性 ,并 将 电话 号 码 PhoneNumber 赋值 给 全 局 变量 phoneNum, 供 拨打 电话 和 发 送 短信 
功能 使 用 。 
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在 拨打 电话 前 ,要 先 设 置 PhoneCalll 控件 的 PhoneNumber 属性 。 将 全 集 变 量 
phoneNum 中 保存 的 电话 号 码 赋值 给 PhoneNumber 属性 后 ,就 可 以 调用 MakePhoneCall 
方法 拨打 电话 了 ,如 图 5.93 所 示 。 


图 5.93 拨打 电话 功能 


发 送 短信 功能 中 有 一 个 小 技巧 ,就 是 避免 用 户 发 送 空 短信 。 首 先 判断 短信 内 容 是 否 
为 空 ,如 果 短 信 内 容 不 为 空 , 才 可 以 进行 实质 的 短信 发 送 过 程 。 发 送 短信 前 ,要 设置 
Textingl 控件 的 PhoneNumber 属性 和 Message 属性 ,然后 调用 SendMessage 方法 发 送 
短信 ,如 图 5. 94 所 示 。 


图 5.94 短信 发 送 功能 


短信 接收 功能 非常 简单 ,如 图 5. 95 所 示 ,在 Textingl 的 MessageReceived 事件 中 ， 


图 5.95 短信 接收 功能 
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将 事件 传递 的 number( 短 信 发 送 者 电话 号 码 ) 和 messageText( 短 信和 内容) 一 同 显示 在 标 


签 控 件 LabelShow 上 即 可 。 其 中 ,将 Textingl 的 ReceivingEnabled 参数 设置 为 2 
(foreground) ,表示 仅 在 软件 运行 期 间接 收 短信 息 


PhoneBook 示例 全 部 逻辑 模块 如 图 5. 96 所 示 。 


apen 
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5.96  PhoneBook 示例 全 部 逻辑 模块 
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l. 音频 播放 器 控件 和 音效 控件 在 使 用 场合 和 使 用 方式 上 有 何 区 别 ? 
2. 选取 联系 人 控件 的 功能 能 否 被 选取 号 码 控件 替代 ? 为 什么 ? 
$; 


完成 一 个 简单 的 应 用 ,界面 效果 如 图 5. 97 所 示 ,要 求 通过 列表 选项 在 不 同 的 曲目 
间 进 行 选 择 ( 曲 目 数量 及 内 容 自 拟 ) ,并 通过 按钮 控制 播放 和 停止 。 


5.97 音乐 播放 器 界面 效果 


动画 效果 是 游戏 中 不 可 缺少 的 内 容 , 本 章 主要 介绍 画布 (Canvas) 和 精灵 (ImageSprite) 
的 使 用 方法 ,以 及 一 些 高 级 的 动画 功能 ,如 边缘 检测 、 碰 撞 处 理 和 精灵 操纵 等 。 

本 章 学 习 目标 : 

。 掌握 画布 的 使 用 方法 ; 

。 理解 画布 的 坐标 系统 ; 

。 掌握 精灵 的 使 用 方法 ; 

。 掌握 球 (Ball) 的 使 用 方法 ; 

。 了 解 边 缘 检 测 和 碰撞 处 理 的 原理 。 
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611 画布 介绍 


画布 是 一 种 可 在 其 上 绘制 图 像 的 控件 ,初始 的 画布 像 是 一 张 空白 的 幻灯 片 ,没有 任 
何 内 容 , 用 户 可 以 在 画布 上 绘制 各 种 图 形 ,例如 线条 ,点 、 和 矩形 或 圆 形 , 也 可 以 在 画布 上 加 
载 图 片 作 为 画布 的 背景 ,或 是 在 画布 上 显示 文字 。 画 布 是 常用 的 控件 ,除了 作为 绘制 图 
形 的 承载 体 以 外 ,还 经 常 作为 游戏 的 背景 画面 。 

画布 是 一 个 具有 触 控 感 应 的 二 维 平面 图 板 ,采用 经 典 的 二 维 坐标 系 ,坐标 的 原点 在 
画布 的 左上 角 。 下 面 以 图 6.1 中 的 坐标 点 (X,Y) 说 明 画 布 的 坐标 系 ,X 表示 坐标 点 距离 
左 侧 边缘 的 距离 ,Y 表示 坐标 点 距离 上 边缘 的 距离 , 且 X 和 Y 都 取 正 值 。 


612 画布 使 用 


在 基本 控件 库 中 可 以 找到 画布 (Canvas) ,将 画布 拖 忠 到 界面 设计 区 后 ,画布 仅 显 示 
为 一 个 小 图 标 ,如 图 6. 2 所 示 。 如 果 要 让 画布 填充 满 整 个 屏幕 ,只 需 手 动 设置 画布 的 宽 
度 (Width) MAE (Height), 

除了 可 以 使 用 宽度 和 高 度 属性 控制 画布 的 大 小 以 外 ,画布 还 支持 更 改 背景 颜色 
(BackgroundColor) 和 更 改 背景 图 片 (BackgroundImage) .设置 画笔 的 颜色 (PaintColor) 
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图 6.1 画布 的 二 维 坐标 系 图 6.2 画布 控件 


和 宽度 (LineWidth) ,以 及 画布 是 否 可 见 (Visible) 等 属性 。 画 布 的 全 部 属性 如 图 6.3 所 
示 , 属 性 说 明 如 表 6. 1 所 示 。 


BackgroundColor 表 6.1 E Tn 属性 

[] White 

Backgroundimage — B 性 说 明 

BackgroundColor 背景 颜色 

BackgroundImage 背景 图 片 

e FondSize 字体 大 小 

PaintColor 

Wess LineWidth 画笔 宽度 

TextAlignment 

center [=] PaintColor 画笔 颜色 

Visible 

showing [s] TextAlignment 文字 排列 方式 

Width 

Fill parent Visible 画布 控件 是 否 可 见 

crum Width 画布 宽度 
= Height 画布 高 度 

图 6.3 画布 属性 


画布 支持 的 事件 有 拖 忠 事件 (Dragged)、 触 碰 事 件 (Touched)、 快 速 划 动 事件 
CFlung) 、 触 碰 按 下 事件 (TouchDown) 和 触 碰 摊 起 事件 (TouchUp) ,如 表 6.2 所 示 。 


表 6.2 画布 事件 
事 件 说 明 
Dragged 拖 忠 事件 
Flung 快速 划 动 事件 
TouchDown 触 碰 按 下 事件 
TouchUp 和 触 碰 抬 起 事件 
Touched 触 碰 事 件 , 由 触 碰 按 下 动作 和 和 触 碰 抬 起 动作 组 成 
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53i 下 面 以 图 6. 4 的 场景 为 例 ,来 说 明 画 布 事 
M 件 的 响应 规律 。 如 果 手 指 按 住 A 点 ,此 时 将 
产生 TouchDown 事件 ,手指 从 A 点 抬 起 ,将 
De 产生 TouchUp 事件 和 Touched 事件 。 

如 果 手 指 从 A 点 按 下 ,缓慢 地 沿 弧 线 , 从 
B 点 滑动 到 C 点 ,然后 抬 起 手指 。 当 手指 接触 
到 A 点 时 ,将 产生 TouchDown 事件 ,在 手指 
heorentx, curenm | 从 A 到 B 再 到 C 的 移动 过 程 中 ,将 多 次 产生 

' Dragged 事件 ,在 手指 离开 C 点 时 ,将 产生 

1 TouchUp 事件 。 可 见 ,无 论 手 指 在 屏幕 上 如 

何 移动 ,TouchDown 和 TouchUp 事件 只 在 手 

图 6.4 画布 中 二 维 坐标 与 事件 参数 指 触 碰 到 屏幕 和 离开 屏幕 时 产生 。 如 果 手 指 

的 触 磁 点 和 抬 起 点 是 同一 点 ,将 引发 Touched 

事件 ,而 如 果 手 指 在 屏幕 上 移动 了 , 则 不 会 引发 Touched 事件 。TouchDown 事件 、 

TouchUp 事件 和 Touched 事件 可 以 为 用 户 提 供 触 磁 点 的 坐标 ,有 一 个 需要 注意 的 事情 ， 
TouchUp 提供 的 坐标 点 ,是 手指 按 下 时 的 坐标 ,而 不 是 手指 抬 起 时 的 坐标 。 

Dragged 事件 在 手指 移动 过 程 中 持续 产生 ,主要 用 来 跟踪 手指 的 移动 轨迹 。Dragged 
事件 提供 三 个 坐标 ,分 别 是 移动 开始 坐标 点 (StartX 和 Start YO .事件 产生 时 的 当前 坐标 
点 (CurrentX 和 Current Y) .前 一 个 事件 产生 时 的 坐标 点 (PrevX 和 PrevY)。 以 图 6.4 的 
场景 为 例 , 如 果 从 A 点 到 C 点 的 过 程 中 ,只 在 已 点 和 C 点 产生 了 Dragged 事件 , 则 在 
C 点 产生 的 事件 中 ,移动 开始 节点 是 A, 当 前 节点 是 C, 前 一 个 事件 产生 是 在 B 点 。 

Flung 事件 只 有 手指 在 屏幕 上 快速 划 动 的 时 候 才 会 产生 。 同 样 是 从 A 经 过 B 到 
C 的 过 程 , 如 果 手 指 在 屏幕 上 移动 得 足够 快 , 则 当 手 指 在 C 点 抬 起 时 ,会 产生 Flung 事 
件 。Flung 事件 中 会 提供 划 动 开始 节点 的 坐标 `. 划 动 方向 .速度 .速度 在 X 轴 和 YY 轴 的 
分 量 。 

如 图 6.5 所 示 为 逻辑 编辑 器 中 的 画布 事件 。 


= 


图 6.5 逻辑 编辑 器 中 的 画布 事件 
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下 面 用 CanvasEvent 示例 说 明 画 布 的 事件 响应 的 时 机 和 提供 的 数据 。 图 6. 6 分 别 


是 在 界面 编辑 器 中 的 界面 和 手机 运行 时 的 界面 。 


|F] Disptay hidden components in Viewer 


“SAG sos Pu 


图 6.6 界面 编辑 器 中 的 CanvasEvent 示例 


CanvasEvent 示例 (图 6.7) 中 上 方 是 画布 控件 ,下 方 是 各 种 事件 数据 的 显示 区 域 。 


在 上 方 的 画布 上 进行 触 磁 操 作 或 滑动 操作 ,事件 的 响应 
结果 便 会 显示 在 界面 下 部 。 

CanvasEvent 示例 的 逻辑 部 分 也 较为 简单 。 在 每 
个 事件 的 响应 函数 中 ,将 事件 所 可 以 提供 的 数据 ,格式 
化 为 一 个 字符 串 显 示 在 界面 固定 位 置 上 。 如 图 6. 8 所 
示 为 Flung 事件 和 Dragged 事件 处 理 函 数 ,图 6. 9 为 
TouchDown 事件 和 TouchUp 事件 处 理 函 数 ,图 6. 10 
为 Touched 事件 处 理 函 数 。 

通过 CanvasEvent 示例 ,用 户 可 以 充分 理解 画布 所 
支持 的 事件 ,以 及 事件 的 使 用 方法 。 下 面 将 介绍 画布 所 
支持 的 方法 ,例如 清空 画布 、 绘 制图 形 ,画布 保存 等 。 画 
布 所 支持 的 全 部 方法 如 表 6. 3 Bron 。 


rag0: start(117.0,149.0), prev( 197.0,91.0), 
'urrent( 200.0,87.0) 

lung(): (117.0,149.0), speed 1.46761, heading 
5.93832, xvel 1.18825, yvel -0.86136 
ouchDown(: (117.0,149.0) 

'ouchUp0: (117.0,149.0) 

ouched0: (77.0,172.0) 


6.7  CanvasEvent 示例 运行 界面 


画布 所 支持 的 方法 ,如 Clear 和 Save 是 不 需要 用 户 提供 任何 参数 的 ,但 绝 大 多 数 方 
法 都 需要 用 户 提供 坐标 作为 基本 参数 ,如 DrawPoint 和 GetPixelColor。 图 6. 11 给 出 了 


画布 所 有 方法 需要 用 户 提供 的 参数 。 
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图 6.9 TouchDown 事件 和 TouchUp 事件 处 理 函 数 


表 6.3 画布 控件 方法 说 明 


图 6.10 Touched 事件 处 理 函 数 


方 法 说 明 
Clear 清除 画布 
DrawCircle 绘制 圆 形 图 形 
DrawLine 绘制 线条 
DrawPoint 绘制 圆 点 
DrawText 绘制 文字 
DrawTextAtAngle 以 一 定 角度 绘制 文字 
GetBackgroundPixelColor | 获取 背景 图 片 指定 像素 的 颜色 
GetPixelColor 获取 图 片 指定 像素 的 颜色 
Save 画布 保存 
SaveAs 画布 另存 为 
SetBackgroundPixelColor | 设置 背景 图 片 特定 像素 的 颜色 
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图 6.11 画布 的 方法 


Clear 方法 可 以 清空 画布 元 素 , 如 果 画 布 上 已 设置 图 片 , 设 置 的 图 片 也 会 被 清除 。 
DrawCircle 在 画布 上 (x,y) 点 绘制 一 个 半径 为 7 的 圆 形 。DrawLine 会 在 画布 上 从 
(zl,y]) 点 到 (z2,y2) 点 绘制 一 条 直线 。DrawPoint 在 画布 (z,y) 点 上 绘制 一 个 圆 点 。 
DrawText 会 在 (z,y) 点 上 绘制 文字 Text。DrawTextAtAngle 会 在 (z,y) 点 以 角度 
angle 绘制 文字 Text。GetBackgroundPixelColor 获取 背景 图 片上 (z,y) 点 的 颜色 。 
GetPixelColor 获取 前 景 上 (x,y) 点 的 颜色 。SetBackgroundPixelColor 设置 背景 图 片上 
(zs,y) 点 的 颜色 为 color, 

Save 将 画布 图 像 存 储 到 外 部 存储 器 的 默认 路 径 中 ,并 返回 存储 的 路 径 和 文件 名 , 若 
存储 发 生 错误 , 则 会 返回 错误 信息 。SaveAs 可 以 将 画布 图 像 存储 到 外 部 存储 器 中 ,并 指 
定 文件 名 为 filename, XPF HJE RVI H “jpeg” “jpg” R“ png”. 


613 相机 与 加 速度 传感器 


在 介绍 “画图 板 ” 示 例 之 前 , 先 来 说 明 一 下 如 何 使 用 手机 的 相机 和 加 速度 传感器 。 
相机 控件 是 一 个 非 可 视 化 控件 ,可 利用 手机 的 镜头 进行 拍照 。 相 机 控件 在 媒体 控件 
区 (Media) 可 以 找到 ,如 图 6. 12 所 示 。 


相机 控件 只 支持 一 种 方法 TakePicture, 如 图 6. 13 所 示 ,此 方法 被 调用 时 ,手机 将 进 
行 拍照 。 该 方法 结束 后 会 引发 AfterPicture 事件 。 


Non-visible components 


& 
Camera 


6.12 相机 控件 图 6.13 相机 控件 的 TakePicture 方法 
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AfterPicture 事件 在 拍照 完成 后 产生 ,其 中 image 是 手机 中 用 来 存放 拍摄 照片 的 路 
径 信息 ,如 图 6. 14 所 示 。 

加 速 传感器 控件 用 来 检测 手机 加 速度 大 小 ,可 在 三 个 方向 测量 手机 晃动 时 的 加 速 
度 , 测 量 单位 为 米 / 秒 * (m/s*)。 加 速 传感器 控件 在 传感器 控件 区 (Sensors) 可 以 找到 ,如 
图 6.15 所 示 。 


when Camera1.AfterPicture image C name 
dò py 


图 6.14 相机 的 AfterPicture 事件 6.15 ”加 速 传感器 控件 


image | 


Non-visible components 


" Accelerometersensori 


加 速 传感器 控件 支持 X 加 速度 、Y 加 速度 、Z 加 速度 ,每 个 加 速度 数值 都 有 正 值 和 负 
值 ,这 类 似 于 坐标 系 中 数 轴 上 的 数值 。 其 中 ,设备 处 于 水 平 位 置 向 右倾 斜 , 即 设备 左 侧 抬 
高 时 ,X 加 速度 数值 为 正 值 ; 反 之 ,设备 向 左倾 斜 , 即 右 侧 抬 高 时 ,X 加 速度 数值 为 负 值 。 
手机 处 于 水 平 位 置 ,当下 部 抬 起 时 站 加 速度 为 正 值 ;反之 ,手机 上 部 抬 起 时 Y 加 速度 为 负 
值 。 手 机 处 于 水 平 位 置 , 当 屏 幕 朝 上 时 Z 加 速度 为 正 值 ;屏幕 朝 下 时 Z 加 速度 为 负 值 。 
此 外 , 当 手 机 屏幕 朝 上 且 水 平 放置 时 ,2Z 加 速度 约 为 9. 8m/s* 。 

加 速 传感器 控件 还 支持 MinimumInterval, Available 和 Enabled 属性 ,属性 的 具体 含 
义 如 表 6.4 所 示 。 


表 6.4 加 速 传感器 控件 的 属性 


属 性 说 明 属 性 说 BB 
Available 手机 是 否 具有 加 速 感应 器 件 | YAccel 垂直 加 速度 
Enabled 加 速 感应 器 控件 是 否 可 用 ZAccel 竖 直 方向 加 速度 
XAccel 水 平 加 速度 MinimumJInterval | 手机 晃动 的 最 小 间隔 


加 速 传感器 控件 支持 的 事件 有 AccelerationChanged 和 Shaking, 如 图 6. 16 所 示 。 
AccelerationChanged 事件 在 加 速 传感器 的 加 速度 改变 时 调用 ,并 根据 加 速 传感器 的 变化 
返回 X、Y、Z 加 速度 值 , 可 以 在 三 个 方向 上 确定 手机 晃动 时 的 加 速度 大 小 。Shaking 事件 
在 手机 摇晃 时 会 被 多 次 调用 。 


图 6.16 加 速 传感器 控件 的 事件 
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614 示例 


画图 板 


前 面 的 内 容 详细 地 介绍 了 画布 的 使 用 方法 ,下 面 介 绍 一 个 更 为 复杂 的 示例 PaintPic。 
在 PaintPic 示例 中 ,除了 用 到 画布 控件 之 外 ,还 使 用 了 
相机 控件 (Camera) 和 加 速 传 感 器 控件 
(AccelerometerSensor) 。 

PaintPic 示例 主要 实现 画布 功能 ,可 以 利用 画笔 在 
画布 上 绘制 线条 或 者 圆 形 图 案 , 并 可 选 不 同 的 画笔 颜 
色 , 可 以 使 用 “清空 画布 "按钮 或 者 摇晃 手机 的 方式 清空 
画布 ,调用 手机 照相 功能 ,将 所 拍摄 的 图 片 作为 画布 的 
背景 ,并 可 以 将 画布 的 背景 和 绘制 的 图 像 保 存 成 文件 。 
PaintPic 示例 的 运行 界面 如 图 6. 17 所 示 。 | 

PaintPic 示 例 中 大 量 使 用 了 按钮 和 水 平 布局 ,并 且 A AE A 
使 用 了 两 个 非 可 视 化 控件 相机 和 加 速 传感器 。 这 两 个 mew: [E] ases sm mems 
控件 在 界面 设计 图 中 可 以 找到 ,如 图 6. 18 中 编辑 区 的 
最 下 方 的 Cameral 和 AccelerometerSensorl 分 别 就 是 
相机 和 加 速 传感器 。 虽 然 在 界面 设计 图 中 可 以 看 到 非 可 视 化 控件 ,但 在 程序 实际 运行 过 
程 中 是 完全 不 可 见 的 。 

Viewer Components 


Screent 日 国 HonzontaArrangement! 


E Display hidden components in Viewer 
G 


6.17 PaintPic 示例 运行 界面 


因 penuabal 


Bliaeasuton. 
国 GreenButon 
国 BweButon 
加 Drawingcanvas 
日 国 operatehorzontawArangement 
[AjRadusLabel 
国 Bgeuton 
E smansution 
e E saveronzontaurangement 
{A]FuncLavei 
H rakepicsutton 
B imagePicker 
H savesutton 
E wipesutton 
[A] Savestatust aber 


camera: 


图 Accelerometersenson 2 
Rename || Delete. 


Media 
Non-visible components. camera png 


leat png 
Camera! AccelerometerSensori Upload new... 


6.18  PaintPic 示例 界面 设计 图 
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完成 PaintPic 示例 的 界面 设计 后 ,下 面 进 行 逻辑 功能 的 设计 。 

逻辑 功能 设计 的 第 一 步 是 定义 一 个 全 局 变量 paintsize, 用 来 表示 绘制 圆 形 图 案 的 半 
径 。 定 义 全 局 变量 要 从 Built-In 一 Definition->Variable 获取 全 局 变量 模块 ,被 拖 忠 到 编 
辑 区 后 会 自动 命名 为 variablel ,如 图 6. 19 所 示 。 


图 6.19 获取 全 局 变量 


单 击 全 局 变量 的 名 称 部 分 variablel ,将 其 更 改 为 “paintsize”。 通 过 Built-Inp> Math 
— Number 添加 一 个 数值 模块 ,将 数值 更 改 为 4。 将 paintsize 变量 和 数值 模块 组 合 , 便 将 
全 局 变量 paintsize 赋值 为 4, 如 图 6. 20 所 示 。paintsize 变量 的 值 为 4, 表示 绘 制 圆 形 图 
案 的 半径 为 4 个 像素 。 

逻辑 功能 设计 的 第 二 步 是 响应 “大 圆 形 ? 按 钮 和 * 小 圆 形 ”按钮 的 单 击 事件 ,如 图 6. 21 
所 示 。 这 两 个 按钮 可 以 控制 绘制 圆 形 图 案 半 径 大 小 “大 圆 形 ” 按 钮 将 半径 设置 为 10( 即 
paintsize- 10) “小 圆 形 ” 按 钮 将 半径 设置 为 4( 即 paintsize 一 4) 。 


number 10 


图 6.20 给 paintsize 全 局 6.21 “大 圆 形 ”按钮 和 * 小 圆 形 ” 按 钮 的 单 击 事件 
变量 赋值 


逻辑 功能 设计 的 第 三 步 是 响应 画布 的 触 碰 事 件 ,也 就 是 在 画布 上 以 paintsize 变量 作 
为 半径 ,以 触 碰 点 (x,y) 作 为 中 心 点 绘制 圆 形 图 案 , 如 图 6. 22 Bron. 


图 6.22 画布 的 触 碰 事 件 


在 My Blocks— DrawingCanvas > DrawingCanvas. Touched 获取 到 画布 的 触 碰 事 
ft. Ej My Blocks>DrawingCanvas >DrawingCanvas. DrawCircle 组 合 。 再 将 My Blocks My 


z@= 动画 与 游戏 105 


Definitions x, My Blocks > My Definitions > y 和 paintsize 全 局 变量 组 合 到 
DrawingCanvas. DrawCircle 模块 上 ,这 样 就 完成 了 画布 触 碰 事件 的 处 理 。 

逻辑 功能 设计 的 第 四 步 是 响应 画布 的 拖 电 事件 ,也 就 是 在 画布 上 按照 手指 移动 的 轨 
迹 绘 制 线条 ,如 图 6.23 所 示 。 实 现 的 方法 是 ,在 画布 的 拖 中 事件 中 ,根据 当前 点 和 前 一 
个 点 的 坐标 绘制 直线 ,因为 拖 忠 事件 的 响应 频率 很 高 ,这 样 在 画面 上 看 就 是 沿 着 手指 移 
动 形成 的 轨迹 ,而 不 是 由 多 个 点 形成 的 折线 。 


yhen DrawingCanvas.Dragged 


图 6.23 ”画布 的 拖 忠 事件 


1E My Blocks>DrawingCanvas >*DrawingCanvas. Dragged 获取 到 画布 的 拖 电 事件 ， 
与 My Blocks— DrawingCanvas > DrawingCanvas. DrawLine 组 合 。 再 将 My Blocks > 
My Definitions > prevX My Blocks 一 My Definitions  prevY, My Blocks > My 
Definitions > currentX 和 My Blocks > My Definitions > currentY 组 4 到 
DrawingCanvas. DrawLine 模块 上 ,这 样 就 完成 了 画布 拖 忠 事件 的 处 理 。 

逻辑 功能 设计 的 第 五 步 是 响应 三 个 修改 画笔 颜色 按钮 的 事件 ,而且 要 在 初始 化 的 时 
候 设 置 画笔 的 颜色 。 

先 从 My Blocks>DrawingCanvas >DrawingCanvas. PaintColor 获取 到 控制 画笔 颜 
色 的 模块 ,在 Built-In-* Colors 中 分 别 获取 表示 红色 、 绿 色 和 蓝 色 的 模块 ,将 颜色 模块 与 
DrawingCanvas. PaintColor 属性 组 合 在 一 起 ,就 可 以 实现 修改 画笔 的 颜色 。 然 后 再 将 这 
些 组 合 模 块 分 别 与 RedButton. Click, GreenButton. Click 和 BlueButton. Click 组 合 完成 
响应 画笔 颜色 修改 按钮 的 事件 ,如 图 6. 24 所 示 。 


nhen GreenButton.Click 
when Screent.nitialize xa 
Mm Z do [set to Ü. color Green 
DrawingCanvas.PaintColor - 
—ə.Ñ 


图 6.24 画笔 颜色 修改 按钮 的 事件 
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画笔 的 默认 颜色 为 黑色 ,而 Paint Pic 示例 中 画笔 只 有 红色 、 绿 色 和 蓝 色 可 选 ,这 样 需 
要 在 屏幕 页 初始 化 的 时 候 修 改 画 笔 颜 色 ,将 画笔 颜色 修改 为 红色 。 

屏幕 页 初始 化 模块 在 My Blocks— Screenl — Screenl. Initialize 中 ,该 模块 会 在 屏幕 
页 启动 时 被 调用 ,一 般 用 来 初始 化 控件 的 属性 等 操作 。 

逻辑 功能 设计 的 第 六 步 是 两 种 清空 画布 方法 的 实现 ,一 种 是 单 击 “清空 画布 ?按钮 实 
现 的 , 另 一 种 是 通过 晃动 手机 实现 的 ,如 图 6. 25 所 示 o 


k k 


图 6.25 画布 清空 逻辑 


清空 画布 的 方法 在 My Blocks>DrawingCanvas>DrawingCanvas. Clear ,该 模块 会 
将 画布 上 所 有 画笔 所 绘制 的 内 容 全 部 清除 ,但 画布 背景 内 容 不 会 有 变化 。 

加 速度 传感器 的 晃动 事件 在 My Blocks 一 AccelerometerSensorl 一 
AccelerometerSensorl. Shaking 中 ,该 事件 在 晃动 手机 时 被 调用 ,经 DrawingCanvas. 
Clear 模块 与 其 组 合 , 就 可 以 在 晃动 手机 时 清空 画布 内 容 。 

逻辑 功能 设计 的 第 七 步 是 画布 背景 更 换 功 能 ,同样 是 支持 两 种 更 换 方法 ,一 种 是 单 
击 “ 选 中 图 片 ”按钮 ,在 手机 的 图 片 库 里 面 选 择 画 布 背 景 ; 另 一 种 是 通过 手机 拍照 ,将 拍摄 
的 图 片 更 换 为 画布 背景 ,如 图 6. 26 所 示 。 

T TakepicButton. Click "Cen Camerat.AfterPicture image (^ n 
cal Camera1 TakePicture. E» [CNET mani € 


一 


ii 


Wen ImagePicker.AfterPicking 
do A = 
DrawingCanvas.Backgroundimage ImagePicker.Selection 


6.26 画布 背景 更 换 罗 辑 


更 换 画 布 背景 图 片 是 通过 修改 My Blocks > DrawingCanvas 一 DrawingCanvas. 
BackgroundImage 属性 实现 的 ,将 指定 的 图 像 Cimage) 赋 值 给 BackgroundImage 属性 ,就 
完成 了 画布 背景 的 修改 。 

除了 从 相机 获取 图 像 以 外 ,还 可 以 从 ImagePicker 获取 背景 图 片 。ImagePicker 的 
AfterPicking 方法 在 用 户 选 择 图 片 后 被 调用 ,该 方法 与 修改 画布 背景 的 模块 组 合 在 一 起 ， 
并 将 ImangePicker. Selection 作为 图 像 参 数 传 递 给 BackgroundImage 属性 ,就 可 以 实现 
画布 背景 的 更 改 。 

相机 控件 在 用 户 单 击 TakepicButton 按钮 时 ,调用 TakePicture 方法 拍照 ,在 获取 到 
照片 后 ,会 立即 调用 AfterPicture 方 法 ,用 获取 的 照片 修改 画布 背景 。 

逻辑 功能 设计 的 第 八 步 , 也 是 最 后 一 步 ,就 是 将 画布 内 容 保存 为 文件 。 该 方法 的 实 
现 是 通过 调用 DrawingCanvas. Save 方法 ,直接 将 画布 内 容 保存 到 手机 的 SD 卡 中 ,并 将 
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该 方法 返回 的 文件 路 径 传 递 给 SaveStatusLabel. Text 属性 ,显示 在 界面 的 最 下 方 , 如 
图 6. 27 所 示 。 


图 6.27 画布 内 容 保 存 为 文件 


将 上 述 逻 辑 模块 添加 完成 后 ,在 模块 编辑 器 中 全 部 逻辑 功能 如 图 6. 28 所 示 。 


6.28 PaintPic 全 部 逻辑 模块 


PaintPic 示例 在 手机 上 的 运行 结果 如 图 6. 29 所 示 。 在 模拟 器 上 运行 该 示例 时 , 则 不 
可 以 使 用 手机 拍照 和 通过 晃动 手机 清空 画布 功能 。 


PaintPic 


inis M 


storage/sdcard0/My Documents/Pictures/ 
app. inventor. 1363533529151.png 


图 6.29 PaintPic 示例 在 手机 上 的 运行 效果 


Quas z anui q t 3— t 8 3 Z š K dn dents 


621 精灵 介绍 


62 ARER 


图 像 精灵 (ImageSprite) 是 一 种 可 在 画布 中 自由 移动 的 图 像 ,并 可 与 球体 (Ball) .其 他 
图 像 精灵 和 画布 边缘 产生 碰撞 效果 ,因此 图 像 精灵 经 常用 于 游戏 开发 ,如 图 6. 30 所 示 。 
动画 类 别 中 的 图 像 精 灵 如 图 6. 31 所 示 。 


+ 从 00:87 


TEY ! 
=: 人 


5 | "m 


TT nm D 
图 6.30 游戏 中 的 图 像 精 灵 图 6.31 动画 类 别 中 的 
图 像 精灵 


622 精灵 使 用 


将 精灵 放置 在 画布 上 ,精灵 就 接受 触摸 或 拖 动 操作 ,如 果 设置 精灵 自身 关于 运动 的 
一 些 属性 ,精灵 则 可 以 按照 预定 的 方式 移动 。 


Interval 
1000 


Picture 

None... 

Rotates 

gi 

Speed 

10 

Visible 

图 6.32 精灵 控件 属性 设置 


例如 ,为 实现 一 个 图 片 精灵 每 隔 1000ms 向 左 侧 移 动 
10 个 像素 , 则 需 设 置 其 速度 (Speed) 属 性 值 为 10 像素 ,时 间 
间隔 (Interval) 属性 为 1000ms ,方向 (Heading) 属 性 设置 为 
180" ,激活 (Enabled) 属性 设置 为 True。 精 灵 的 旋转 属性 
(Rotates) 设 置 为 True 时 ,图 片 会 根据 精灵 的 朝向 变化 进行 
转动 ,设置 好 的 参数 如 图 6. 32 所 示 。 

图 像 精 灵 支 持 的 属性 如 表 6. 5 所 示 。 其 中 ,属性 
Picture 需要 指定 一 个 图 片 ,是 精灵 在 画布 上 的 图 像 。 属 性 
Rotates 表示 是 否 允 许 精灵 旋转 ,如 果 人 允许 ,图 像 精 灵 在 改 
变 移动 方向 (Heading) 时 ,图 片 会 自动 旋转 以 匹配 新 的 移 
动 方向 。 


X 和 YY 是 图 像 精灵 在 画布 上 的 坐标 ,X 为 0 时 ,表示 图 像 精 灵 已 经 到 达 画 布 的 左 侧 
边界 ;Y 为 0 时 , 则 表示 图 片 精灵 已 经 到 达 画 布 的 上 边界 。Enabled 属性 表示 图 像 精 灵 是 
和 否 会 被 激活 ,如果 精灵 与 移动 相关 的 属性 被 设置 ,同时 Enabled 为 true, 则 图 像 精灵 会 在 
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画布 上 移动 。Visible 属性 决定 了 图 像 精 灵 在 画布 上 是 否 可 见 。 
表 6.5 精灵 的 属性 


属 性 说 明 属 性 说 HR 
Picture 精灵 图 片 x 所 在 位 置 横 坐 标 
Enabled 是 否 激活 X 所 在 位 置 纵 坐标 
Interval 移动 频率 Width 图 片 宽 度 
Rotates 是 否 允 许 精灵 旋转 Height 图 片 高 度 
Heading 移动 方向 Visible 是 否 可 见 
Speed 移动 速度 


属性 Heading 是 图 像 精灵 的 移动 方向 , 取 值 范围 是 0~360, 其 中 ,0 表示 水 平 向 右 ， 
90 代表 垂直 向 上 ,180 代表 水 平 向 左 ,270 表示 垂直 向 下 ,如 图 6. 33 所 示 。 


图 6.33 精灵 朝向 数值 代表 含义 


图 片 精灵 支持 的 事件 包括 碰撞 事件 , 拖 忠 事件 、 触 壁 事 件 、 非 碰撞 事件 和 触摸 事 件 
等 ,所 支持 的 全 部 事件 如 表 6.6 所 示 。 


表 6.6 精灵 的 事件 


事 件 说 明 事 件 说 明 
CollidedWith 碰撞 事件 Dragged 拖 电 事 件 
EdgeReached 触 壁 事件 Flung 快速 划 动 事件 
NoLongerCollidingWith 不 再 碰撞 事件 TouchUp 和 触 碰 抬 起 事件 
Touched 触摸 事件 TouchDown 触 碰 按 下 事件 


图 片 精灵 的 事件 模块 如 图 6. 34 所 示 。 碰 撞 事 件 、 不 再 碰撞 事件 和 触 壁 事件 属于 碰 
撞 检测 事件 ,这 部 分 内 容 将 在 “高 级 动画 功能 ”小 节 介绍 。 

精灵 控件 的 方法 实现 了 精灵 的 移动 .反弹 和 碰撞 检测 动作 。 图 像 精灵 支持 的 方法 如 
表 6.7 和 图 6. 35 所 示 。 

ColldingWith 方法 用 来 检测 图 像 精灵 是 否 发 生 碰 撞 , 返 回 值 为 true 时 ,说 明 与 指定 
精灵 或 画布 边缘 发 生 碰 撞 ;返回 值 为 false 时 , 则 未 发 生 碰撞 。 

MoveIntoBounds 方法 是 将 超出 边缘 的 控件 ,重新 移动 至 画布 边缘 范围 内 。 
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图 6.34 精灵 控件 事件 


表 6.7 精灵 的 方法 
方 法 说 明 
Bounce 精灵 从 边缘 反弹 


ColldingWith | 检测 精灵 是 否 碰 撞 BREST 
精灵 移 至 边界 内 


MovelntoBounds | 精灵 超出 边界 时 将 


MoveTo 将 精灵 移动 到 指定 坐标 点 77 woe congue, "f; Dgsesenteeea, Ó 


PointTowards 将 移动 方向 朝向 另 一 个 精灵 E MoleMovelntəBeunds | E 


PointInDirection | 将 移动 方向 朝向 指定 坐标 点 


623 示例 一 一 打 地 鼠 


6.35 精灵 的 方法 


Mole 示例 是 经 典 的 “ 打 地 和 鼠 ” 游 戏 , 虑 鼠 在 5 个 洞 中 随机 出 现 , 但 出 现 的 时 间 非 常 短 


6.36 Mole 示例 的 运行 界面 


"Er ,因此 要 集中 精力 快速 单 击 洞口 的 髓 鼠 , 每 次 成 功 地 
Ta RE BUS 1 分 ,积累 到 10 分 游戏 胜利 。Mole 示例 的 
运行 界面 如 图 6. 36 所 示 。 

单 击 Play 按钮 开始 游戏 , 绥 鼠 会 随机 出 现在 洞口 ， 
每 次 单 击 虑 鼠 将 会 产生 一 次 振动 反馈 ,同时 “分 数 ” 加 1。 
在 游戏 进行 中 ,如 果 用 户 单 击 Reset 按钮 ,分 数 将 清 零 ， 
再 重新 单 击 Play 按钮 后 重新 开始 游戏 。 游 戏 积累 到 10 
分 后 ,将 出 现 * 恭 喜 你 ,你 赢 了 1!? 的 游戏 胜利 提示 ,并 发 
出 * 叮 吃 ? 声 音 , 如 图 6.37 所 示 。 

在 Mole 示例 的 资源 中 ,共有 5 张 图 片 和 1 个 声音 
文件 ,这 些 资源 都 是 游戏 中 不 可 缺少 的 ,资源 的 说 明 如 
表 6.8 所 示 。 
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表 6.8 资源 文件 说 明 


x 件 说 明 
PlayButton. png Play 按钮 图 片 
ResetButton. png Reset 按钮 图 片 
grass. jpg Canvas] 画布 的 背景 图 片 
hole. png 洞口 精灵 的 图 片 
mole. png 起 鼠 精灵 的 图 片 
SG, 你 赢 了 ! 
DingDong. mp3 游戏 获胜 的 “ 叮 吃 ? 声 音 
图 6.37 游戏 获胜 画面 


Mole 示例 的 界面 设计 图 如 图 6. 38 所 示 。 
© C screent 


9 BlrabieAmangement1 
国 sanawon 
国 ResetButon 


[A]scorereatabel 

[A]scorevatueLabel 
9 [j canvast 

uoi 

holes 

M hole2 

M holes 

M holes 


Mmoe 


日 B horizontaiarrangementa 
[&]winrextvalueLabet. 
Ü woleCiock 
sound 


Delete 


6.38 Mole 示例 的 界面 设计 图 


时 钟 MoleClock 控制 着 朵 鼠 精灵 周期 性 地 移动 ,因此 设置 MoleClock 时 钟 的 Enable 
属性 为 false, 让 时 钟 在 用 户 单 击 Play 按钮 后 再 启动 。 设 置 时 间 间 隔 (TimerInterval) 为 
10 000ms(10s) ,TimeAlwaysFires 设置 为 true。 

将 声音 控件 Sound 的 Source 属性 设置 为 已 经 上 传 的 DingDong. mp3 文件 ,读者 也 
可 以 选择 自己 喜欢 的 音频 ,但 需要 控制 上 传 文件 的 大 小 。 将 标签 WinTextValueLabel 的 
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Enable 属性 设 为 false, 在 用 户 游戏 胜利 时 再 显 


def as | number 
示 该 标签 内 容 。 “currentHole 0 
在 模块 编辑 器 中 ,首先 定义 两 个 全 局 变量 det as [" call make a list 
holes 和 currentHole, 如 图 6. 39 所 示 。holes 是 | holes item 


! 


图 6.39 定义 全 局 变量 


表示 洞口 图 像 精灵 的 列表 ,在 定义 时 先 调用 
make a list 方法 获得 一 个 空 列表 ,在 屏幕 页 初 
从 化 时 动态 添加 元 素 。currentHole 表示 当前 洞口 的 图 像 精灵 ,在 自 定义 的 MoveMole 
函数 中 使 用 。 

屏幕 页 的 初始 化 事件 完成 了 三 项 工作 ,如 图 6. 40 所 示 : 初始 化 5 个 表示 洞口 的 图 
像 精灵 的 Picture 属性 ; @ 设 置 时 钟 MoleClock 的 TimeEnabled 属性 为 false; 图 设置 图 
片 精 灵 Mole 的 Enabled 属性 为 false。 


list jobal 
97" holes 


item ( component. Hole1 


item component 
Ponent Hole2 


item (` component 


add items to list Hole3 


itei 'omponent. 
m UU 


item component 
PO" Moles 


lobal 
9^?" holes 


6.40 屏幕 页 Screenl 的 Initialize 事件 


虽然 在 界面 编辑 器 中 已 经 设置 了 时 钟 MoleClock 的 TimeEnabled 属性 为 false ,为 了 
避免 误 操 作 引 起 逻辑 错误 ,仍然 在 屏幕 页 的 初始 化 事件 再 次 对 该 属性 进行 设置 。 

设置 图 像 精灵 Mole 的 Enabled 属性 为 false, 可 以 让 图 像 精灵 暂时 不 接受 触 碰 
CTouched) 事 件 ,避免 游戏 还 没有 正式 开始 前 ,用 户 已 经 可 以 开始 通过 单 击 跨 鼠 获得 游戏 
分 数 。 

初始 化 图 片 精灵 Holel — Hole5 有 两 种 方法 : 四 在 界面 编辑 器 中 设置 其 Picture 属 
性 为 上 传 文件 hole. png; 四 在 屏幕 页 初始 化 函数 中 动态 修改 Holel — Hole5 的 Picture 
属性 。 本 示例 使 用 的 是 第 二 种 方法 ,此 方法 略 显 繁琐 ,但 却 演示 了 一 种 动态 的 .批量 的 修 
改 图 像 精 灵 属 性 的 方法 。 
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这 里 用 到 了 Advanced Any ImangeSprite— ImageSprite. Picture 模块 ,如 图 6. 41 
所 示 。Advanced 区 的 模块 可 以 对 所 有 同类 型 


的 控件 进行 操作 ,比如 修改 所 有 标签 的 文字 、| e aaa: 
修改 所 有 按钮 的 颜色 等 。 CRESU q aper 
ImageSprite. Picture 模块 ,如 图 6.42 所 — wass: 
示 , HP component 用 来 拼接 图 像 精灵 i 
(ImageSprite) 模块 , 槽 to 用 来 拼接 图 片 Any Label ^ magesprte spesa. 0e [° 
(Picture) Jš fE, Advanced 区 的 其 他 模块 有 = € ee 
着 与 ImageSprite. Picture 模块 相似 的 结构 和 m sess 
Mi u] DAA I DERE # ELSE D z (EXE ERU — 
性 值 。 图 6.41 Advanced 区 的 模块 


全 局 变量 holes 的 初始 化 是 通过 调用 Built-In- Lists— add items to list 方法 ,将 所 
有 表示 洞口 的 图 像 精 灵 控 件 加 载 到 全 局 变量 holes 中 ,如 图 6. 43 所 示 。 


call 


component 
Hole1 


add items to list 


set component P 
ImageSprite.Picture to in 
i a FEIERN >v = i Ra 


6.42 ImageSprite. Picture 模块 6.43 初始 化 holes 列表 


在 foreach 循环 中 ,调用 ImageSprite. Picture 模块 ,将 每 个 表示 洞口 图 像 精 灵 的 
Picture 属性 都 赋值 为 hone. png, 如 图 6. 44 所 示 。 


foreach variable 


in list bal 
Š i holes 


6.44 循环 调用 ImageSprite. Picture 模块 


Ag TERAH EARE HRe EUIS Ee 27155 I ER MoveMole, X 4 PR KOK RE BUS Fel Z 
精灵 随机 地 出 现在 5 个 洞口 中 的 任意 一 个 ,逻辑 模块 如 图 6.45 所 示 。 

在 MoveMole 函数 中 ,首先 调用 pick random item 方法 ,在 holes 列表 中 随机 选取 一 
个 图 像 精 灵 , 赋 值 给 全 局 变量 currentHole. Ja VALERE REIR Mole 的 MoveTo 77 
法 ,将 currentHole 中 图 像 精灵 的 坐标 X 和 坐标 Y 作为 参数 ,传递 给 MoveTo 方法 ,这 样 
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图 6.45  MoveMole 函数 


WEET VUEERE BAP Oi R E 20 8] 45 Jy i current Hole 所 代表 的 洞 上 面 。 
在 时 钟 MoleClock 的 触发 事件 中 ,只 调用 MoveMole PR lC. £ 2] R Zi B: FCRI s] f 


灵 , 如 图 6. 46 所 示 。 


图 6.46 MoveClock 时 钟 的 Timer 方法 


在 游戏 初始 化 阶段 , MoleClock 时 钟 是 不 运行 的 ,只 有 用 户 单 击 Play 按钮 后 ， 
MoleClock 时 钟 才 开始 运行 。 在 单 击 Reset 按钮 ,或 者 用 户 游戏 胜利 后 ,时 钟 MoleClock 
又 变 为 不 运行 状态 。 时 钟 是 否 运 行 ,由 属性 TimeEnabled 控制 。 在 图 6.47 中 ,可 以 找到 
控制 时 钟 MoleClock 是 否 有 效 的 模块 。 


图 6.47 两 个 按钮 单 击 事件 


ARE BUS RR Mole 的 属性 Enabled 的 逻辑 与 时 钟 MoleClock 是 一 样 的 ,也 
是 在 用 户 单 击 Play 按钮 后 允许 用 户 单 击 (true)。 在 单 击 Reset 按钮 后 , 变 为 不 可 单 击 
(false) 。 

按钮 事件 中 还 完成 了 分 数 归 零 和 隐藏 胜利 信息 等 功能 ,如 图 6.47 所 示 。 

因为 游戏 启动 后 ,时 钟 MoleClock 要 在 一 个 周期 以 后 才 会 触发 ,在 触发 事件 中 错 鼠 
才 会 移动 。 为 了 在 游戏 启动 后 立即 产生 角 鼠 移动 的 效果 ,要 在 StartButton 的 单 击 事件 
中 主动 调用 MoveMole 函数 ,完成 器 鼠 的 一 次 移动 。 
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在 图 像 精 灵 Mole 的 Touched 事件 (图 6. 48) 中 ,用 户 每 次 触 磁 精灵 ,都 要 调用 一 次 
MoveMole 函数 , 移动 一 次 英 鼠 ,并 发 出 振动 反馈 (Sound. Vibrate)。 如 果 游 戏 分 数 
(ScoreVaueLabel. Text) 小 于 10, 则 每 次 触 磁 都 会 将 游戏 分 数 增加 1。 如 果 游 戏 分 数 已 经 
大 于 等 于 10, 则 游戏 结束 ,发 出 游戏 胜利 的 音效 (Sound. Play) ,并 停止 时 钟 (MoleClock)， 
使 诺 鼠 图 像 精 灵 失 效 (Enabled 为 false) ,并 显示 游戏 胜利 的 消息 (WinTextValueLable. 
Visible 为 true)。 


ScoreValueLabel.Text 


图 6.48 图像 精灵 Mole 的 Touched 事件 


Mole 示例 的 全 部 逻辑 模块 如 图 6. 49 所 示 。 


(a) 
6.49 Mole 示例 的 全 部 逻辑 模块 
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component (^ glotal 


add items to list currentHole. 


vt e 
ImageSprite.Picture 0 te 
LLLI 

Ex te 
MoleClock.TimerEnabled 
=... 
(b) 
图 6.49 ( 续 ) 


63 高 级 动画 功能 


631 碰撞 检测 


碰撞 检测 是 在 精灵 的 运动 过 程 中 ,检测 到 精灵 自身 边缘 与 其 他 精灵 或 画布 边缘 接触 
的 技术 ,在 开发 游戏 过 程 中 经 常会 被 使 用 到 。 

图 6. 50 是 疯狂 小 乌 的 游戏 截图 ,这 其 中 就 大 量 使 用 到 了 碰撞 检测 技术 。 例 如 ,小 鸟 
在 飞行 过 程 中 碰撞 到 石 块 ,小 鸟 和 石 块 都 要 有 相应 的 反应 ,小 鸟 会 弹 回 去 , 石 块 会 裂 开 。 
再 例如 ,两 个 操 在 一 起 的 小 猪 ,上 方 的 小 猪 和 下 方 的 小 猪 只 可 以 边界 互相 接触 ,而 不 能 够 
重合 。 


6.50 疯狂 小 鸟 游戏 画面 


碰撞 检测 技术 的 实现 要 运用 数学 和 物理 知识 ,在 不 同 的 情况 下 采用 不 同 的 碰撞 检测 
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方式 ,本 节 主 要 介绍 碰撞 检测 的 基本 原则 和 使 用 方式 。 

一 般 情 况 下 ,只 有 游戏 中 的 物体 发 生 移动 后 才 有 必要 进行 碰撞 检测 ,所 以 碰撞 检测 
的 流程 分 为 三 步 : 更 新 物体 位 置 一 进行 碰撞 检测 一 碰撞 处 理 。 

实现 碰撞 检测 通常 包括 三 个 方面 的 内 容 。 首 先 ,确定 检测 对 象 。 游 戏 在 运行 中 会 有 
很 多 实体 对 象 ,在 进行 碰撞 检测 时 并 不 需要 对 所 有 的 实体 对 象 都 检测 一 遍 , 如 静止 的 宝 
箱 没 有 必要 去 检测 和 另外 的 宝箱 是 否 发 生 了 碰撞 。 所 以 在 开始 碰撞 检测 之 前 ,首先 要 确 
定 碰撞 检测 的 对 象 是 什么 。 其 次 ,检测 是 否 磁 撞 , 这 是 检测 的 核心 环节 。 在 这 个 环节 需 
要 综合 考虑 游戏 本 身 的 需求 ,以 及 运行 平台 的 性 能 等 问题 ,合理 地 选择 碰撞 检测 的 算法 。 
最 后 是 处 理 碰撞 , 当 检测 到 碰撞 发 生 的 时 候 , 就 需要 根据 碰撞 的 类 型 进行 相应 的 处 理 , 例 
如 ,炮弹 会 在 碰 到 目标 后 爆炸 并 给 目标 带 来 伤害 。 


632 球 的 使 用 


球体 (Ball) 是 特殊 的 图 像 精 灵 , 具 有 与 图 像 精灵 相似 的 属性 .完全 相同 的 事件 和 方 
法 。 不 同 之 处 在 于 球体 不 能 够 有 自 定义 的 外 观 ,但 可 以 改变 球 的 大 小 和 颜色 。 球 体 控件 
如 图 6.51 所 示 。 


Animation 
° 
& ImageSprite © © 
6.51 球体 控件 


球体 的 属性 包括 球体 大 小 、 颜 色 移动 频率 移动 方向 和 移动 速度 等 ,如 表 6.9 所 示 。 
表 6.9 球体 的 属性 


属 性 说 明 属 性 说 明 
Radius 球 的 半径 Visible 球体 是 否 可 见 
PaintColor 球体 颜色 Heading 球体 移动 方向 
Enabled 是 否 启动 球体 Speed 球体 移动 速度 
Interval 球体 移动 频率 


球体 与 图 像 精 灵 具 有 相同 的 事件 和 方法 ,下 面 的 内 容 主要 介绍 与 碰撞 检测 相关 的 事 
件 和 方法 。 球 体 中 与 碰撞 检测 相关 的 事件 有 碰撞 事件 .不 再 碰撞 事件 和 触 壁 事件 。 

碰撞 事件 (CollidedWith) 是 当前 图 像 精 灵 与 其 他 精灵 或 画布 边缘 发 生 碰撞 时 产生 的 
事件 ,该 事件 的 参数 other 是 被 碰撞 精灵 的 名 称 , 如 图 6. 52 所 示 。 
不 再 碰撞 事件 (NoLongerCollidingWith) 是 当前 精灵 与 已 经 产生 碰撞 的 精灵 分 开 时 
产生 的 事件 ,是 碰撞 事件 的 对 立 事件 ,如 图 6. 53 所 示 。 当 两 个 精灵 产生 碰撞 时 , 先 发 生 
的 是 碰撞 事件 ,如 果 两 个 精灵 被 弹 开 ,随即 便 会 产生 不 再 碰撞 事件 。 该 事件 的 参数 
otherl 是 被 碰撞 精灵 的 名 称 。 
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When Ball1.CollidedWith oer C name tn | when Ball1.NoLongerCollidingWith oter C name 
other 
do [eu do ié 
= 


图 6.52 球体 的 碰撞 事件 图 6.53 球体 的 不 再 碰撞 事件 


other1 


b 


触 壁 事件 (EdgeReached) 在 图 像 精灵 移动 到 画布 边缘 时 发 生 , 如 图 6.54 所 示 。 当 一 个 
精灵 运动 到 画布 边缘 时 , 则 会 产生 触 壁 事件 ,如 果 不 对 此 事件 做 任何 处 理 ,精灵 则 会 移动 出 
画布 边界 ;相反 ,如 果 在 触 壁 事件 中 将 精灵 的 运 
动 方向 逆转 , 则 精灵 又 会 重新 回 到 画布 中 。 

MERENS edge 表示 所 到 达 的 画布 “| 7 
边缘 ,用 数字 表示 画布 不 同 的 边缘 ,其 具体 的 含 
义 如 图 6. 55 所 示 。1 表示 上 方 Cnorth) ,2 表示 
右上 (northeast)、3 表示 右 侧 (east) .4 表示 右 下 (southeast) ,一 1 表示 下 方 (south) , — 2 表示 
左下 方 (southwest) ,一 3 表示 左 侧 (west) 、 一 4 表示 左上 方 (northwest)。 

在 球体 的 方法 中 ,最 常用 的 就 是 Bounce 方法 ,与 EdgeReached 事件 配合 使 用 可 将 球 
体 从 画布 边缘 反弹 回 画 布 中 。 当 EdgeReached 事件 检测 到 碰撞 后 ,调用 Bounce 方法 ,并 
将 EdgeReached 事件 检测 到 的 碰撞 边缘 Edge 参数 传递 给 Bounce 方法 ,精灵 可 以 根据 此 
参数 进行 边缘 反弹 。 边 缘 检 测 事件 逻辑 模块 如 图 6. 56 所 示 。 


when Ball1.EdgeReached edge ( name | 
edge 


图 6.54 球体 的 触 壁 事件 


edge | value 
Ball1.Bounce 0 ed 


图 6.55 画布 边缘 信息 含义 图 6. 56 ”边缘 检测 事件 逻辑 模块 


633 方向 传感器 


在 介绍 “乒乓 球 ” 示 例 之 前 , 先 来 说 明 一 下 如 何 使 用 手机 的 方向 传感器 。 方 向 传感器 
控件 (OrientationSensor) 是 一 个 非 可 视 化 控件 ,可 用 来 测定 手机 的 三 轴 角 度 的 变化 。 界 
面 编辑 器 中 的 方向 传感器 控件 如 图 6. 57 所 示 。 

将 手机 正面 向 上 地 放置 在 水 平 桌面 上 , 沿 手机 屏幕 水 平方 向 (左右 ) 定 义 为 x 轴 , 水 
F 方 向 (后 前 ) 定 义 为 y 轴 , 垂 直 于 手机 屏幕 的 方向 (上 下 ) 定 义 为 = 轴 , 如 图 6.58 所 示 。 


Qi AcceleromelerSensor 


D 

@ LocalionSensor c || |Won-risible components 

[d OrientationSenscr © E] 
OrientationSensort 


6.57 方向 传感器 
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图 6.58 手机 三 个 维度 示意 图 


方向 传感器 可 以 反馈 三 个 数据 Roll Pitch 和 Azimuth。 方 向 传感器 的 数据 单位 是 
度 , 且 有 正 负 之 分 。 

Roll 表示 手机 x 轴 与 水 平面 的 夹 角 ,范围 为 一 90 一 90。 手 机 处 于 水 平 放置 时 数值 为 
0 ,向 左 侧 倾斜 时 数值 由 0 递增 到 90 ,向 右倾 斜 时 数值 由 0 递减 至 一 90。Pitch 表示 手机 y 
轴 与 水 平面 的 夹 角 ,范围 为 一 90 一 90。 手 机 水 平 放置 时 为 0,y 轴 正 方向 朝 下 倾斜 时 数值 
由 0 增加 到 90,y 轴 正 方向 朝 上 倾斜 时 数值 由 0 递减 至 一 90。Azimuth 表示 方位 ,手机 水 
平 放置 时 磁 北 极 和 y dil e fü ,范围 为 0 一 360。y 轴 正 方向 指向 正 北 时 为 0, 指 向 正 东 为 


90 ,指向 正 南 为 


180 ,指向 西 东 为 270。 


方向 传感器 控件 通过 相关 属性 包括 方向 传感器 的 启动 .方位 角 和 设备 翻转 大 小 等 ， 
来 确定 设备 的 方向 改变 ,如 表 6. 10 所 示 。 


表 6.10 方向 传感器 属性 


属 性 说 明 属 性 说 明 
Available 方向 传感器 是 否 可 用 Roll 水 平 转动 角度 
Enabled 启用 方向 传感器 Magnitude 倾斜 程度 
Azimuth 方位 角 Angle 倾斜 角 

Pitch 垂直 翻转 角度 


Magnitude 表示 手机 倾斜 程度 ,是 一 个 介 于 0 和 1 之 间 的 数 。Angle 表示 倾斜 角 大 小 。 
方向 传感器 只 有 一 个 事件 OrientationChanged, 在 手机 方向 发 生变 化 时 产生 ,返回 
roll pitch 和 azimuth 数据 ,如 图 6.59 所 示 。 即 使 静止 地 放置 在 水 平面 上 ,手机 方向 传 感 


when OrientationSensor1.OrientationChanged azimuth (^ name 
azimuth 


pitch 


roll 


6.59 方向 传感器 的 OrientationChanged 事件 
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器 仍然 能 够 检测 到 微小 的 方向 变化 ,所 以 可 以 认为 EZEEUD == 
OrientationChanged 事件 是 持续 发 生 的 事件 ,事件 中 DH aE AEEA 
的 处 理 过 程 务必 要 简单 高效。 


下 面 通过 Orientation 示例 ,可 令 读者 使 用 自己 “| 04407 
的 手机 感受 如 何 使 用 方向 传感器 ,以 及 分 析 Roll, YS: Roll 
Pitch 和 Azimuth 数据 的 具体 含义 。Orientation 示 -2.75778 


例 的 运行 界面 如 图 6. 60 所 示 ,界面 设计 示意 图 如 — Z#8: Azimuth 
图 6.61 所 示 。 | 79.32386 

Orientation 示例 的 全 部 逻辑 模块 如 图 6. 62 图 6.60 Orientation 示例 的 运行 界面 
所 示 。 


| m. 
5906848 = 535 5306 | == 
Tonnon 
ZE | =a 
[U | espe 
E onemsnonsensor: 
Y 轴 : Roll l 
l 
Z 轴 : Azimuth 
| 
| 
[Rename |[ ose ] 
Dor neus | Teaanew ] 
Orientation Semort 


图 6.61 Orientation 示例 界面 设计 图 


when OrientationSensor1.OrientationChanged azimuth 
pitch 


roll 


to 
TextBoxPitch.Text 


set to 
TextRoll.Text 


set to[ vale | 
TextBoxAzimuth. Text azimuth 


6.62 Orientation 示例 的 全 部 逻辑 模块 


634 示例 一 一 乒乓 球 


本 节 介 绍 一 个 经 典 的 小 游戏 “乒乓 球 ”, 游 戏 中 的 小 球 会 向 画面 下 方 以 一 定 角 度 掉 
落 , 通 过 控制 画面 下 方 的 球 板 , 阻 止 小 球 落 到 地 面 上 。 小 球 磁 到 球 板 后 会 弹 起 ,每 次 接触 
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球 板 都 会 得 1 分 。 游 戏 中 可 以 使 用 触 碰 的 方法 控制 球 _ 
板 ,也 可 以 使 用 方向 传感器 控制 球 板 。 SU CECHEMM 
Pong 示例 的 运行 界面 如 图 6. 63 所 示 。 J 
Pong 示例 使 用 的 控件 有 球体 、 图 像 精灵 、 画 布 . 方 
向 传感器 、 音 效 播放 器 ,以 及 常见 的 按钮 .标签 和 复 选 框 
等 控件 。Pong 示例 的 界面 设计 如 图 6.64 所 示 。 
将 所 有 游戏 需要 的 资源 文件 上 传 到 App Inventor 
中 ,包括 Play 按钮 的 背景 图 片 PlayButton. png、 Reset 
按钮 的 背景 图 片 ResetButton. png、 画 布 的 背景 图 片 
background. png\ 球 板 图 像 精 灵 的 图 片 Paddle. png 和 
失败 声效 文件 DingDong. mp3 。 [esses 
游戏 是 纵向 设计 的 ,这 里 关闭 手机 的 屏幕 旋转 功能 ， 
将 Screenl 的 ScreenOrientation 属性 设置 为 Portrait。 将 
音效 播放 器 的 Source 属性 设置 为 DingDong. mp3。 还 要 将 球体 的 初始 位 置 设 置 为 (20,20)， 
即 属性 X 为 20,Y 属性 为 20, 球 体 的 半径 (Radius) 也 设置 为 20。 


图 6.63 Pong 示例 的 运行 界面 


e 
9 EB rabiearangement 
国 Playeuton 
国 ResetButon 
[A]scoret abet 
ngu a5: 0 [AlvatueLabet 
日 canas: 
sai 
M paaaie 


F conoi 
@sounai 
F orsenatonsensort 


6.64 Pong 示例 的 界面 设计 图 


在 完成 界面 设计 器 的 工作 后 ,开始 程序 的 逻辑 设计 部 分 。 如 图 6.65 所 示 ,首先 在 屏 
幕 页 的 Initialize 事件 中 ,将 球体 Enabled 属性 设置 为 false, 避 免 球 体 在 没有 正式 开始 游 
戏 前 移动 。 还 要 将 方向 传感器 的 Enabled 属性 设置 为 false, 在 用 户 手动 选择 “传感器 控 
制 复 选 框 后 , 才 可 以 启动 传感器 。 
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“传感器 控制 ” 复 选 框 的 Changed 事件 的 逻辑 如 图 6. 66 所 示 。 在 每 次 复 选 框 修改 事件 


中 ,判断 复 选 框 的 状态 ,如 果 复 选 框 被 选中 , 则 启动 方向 传感器 ,否则 就 关闭 方向 传感器 。 


When Control.Changed 
do 


ifelse test 
Control.Checked 
when Screen'.Initialize then-do 


set to 
OrlentationSensor1.Enabled true 


else-do 
set to 
OrientationSensor1.Enabled false 


pa, ——O— 


set to 
Ball.Enabled 


set 


图 6.65 屏幕 页 的 Initialize 事件 6.66 ” 复 选 框 的 Changed 事件 


使 用 方向 传感器 控制 球 板 是 一 个 不 错 的 选择 ,这 样 用 户 就 可 以 不 接触 手机 屏幕 , 利 
用 手机 的 倾斜 角度 控制 球 板 的 移动 方向 ,但 需要 注意 传感器 控制 球 板 的 敏感 程度 。 在 用 
户 操作 手机 过 程 中 ,即使 用 户 水 平 放置 手 机 ,也 难以 避免 产生 微小 的 倾斜 ,但 此 时 用 户 并 
不 希望 移动 球 板 。 方 向 传感器 的 属性 roll 表示 手机 水 平方 向 的 倾斜 角度 ,这 里 设 定 一 个 
门限 值 , 只 有 roll 超出 门限 值 时 , 才 可 以 控制 球 板 ,否则 球 板 将 在 原 位 置 上 不 移动 。 设 置 
门限 值 的 好 处 是 避免 球 板 过 于 敏感 ,不 按照 用 户 的 意图 进行 移动 。Pong 示例 中 这 个 门 
限 值 是 4, 在 图 6.67 中 ,条 件 “abs(roll) 二 4” 就 是 门限 值 的 具体 实现 ,如 果 roll 的 值 小 于 
4, 则 无 法 移动 球 板 。 


ien OrientationSensort.OrientationChanged azimuth (^ name 
azimuth 


pitch. 


6.67 方向 传感器 的 OrientationChanged 事件 


在 方向 传感器 的 OrientationChanged 事件 中 ,roll 的 方向 决定 了 球 板 的 移动 方向 。 
roll 为 正 值 , 球 板 的 X 坐标 值 减 小 , 球 板 向 左 侧 移动 :roll 为 负 值 , 球 板 的 X 坐标 值 增加 ， 
球 板 向 右 侧 移动 。 

除了 可 以 使 用 方向 传感器 控制 球 板 以 外 ,还 可 以 使 用 在 屏幕 上 滑动 手指 来 控制 球 
板 , 这 种 方式 似乎 更 加 普遍 。 在 图 像 精 灵 Paddle 的 Dragged 事件 中 ,修改 图 像 精灵 
Paddle 的 属性 X 值 ,就 可 以 移动 球 板 , 如 图 6. 68 所 示 。 

在 球 板 的 拖 中 过程 中 ,用 户 触 磁 屏 幕 点 ,本 意 都 是 希望 球 板 的 中 心 点 到 达 触 磁 点 。 
currentX 是 触 碰 点 的 X 坐标 ,在 此 基础 上 减 去 40, 就 可 以 将 球 板 精灵 的 中 心 点 移动 到 触 
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Wen Paddle.Dragged 


ae te (C value d number | 
Paddle.X ) currentX | ^ j 40 


n 


图 6.68 图 像 精灵 Paddle 的 Dragged 事件 


碰 点 上 来 。 

开始 游戏 要 单 击 Play 按钮 , 重 置 游戏 要 单 击 Reset 按钮 ,这 两 个 按钮 的 单 击 事件 的 
逻辑 模块 如 图 6. 69 所 示 。 在 PlayButton 的 单 击 事件 中 ,首先 调用 自 定义 的 函数 模块 
initGame, 初 始 化 球体 控件 的 基本 参数 ,然后 使 球体 控件 运动 (Enabled 设置 为 true), fE 
ResetButton 的 单 击 事件 中 , 先 让 球体 控件 停止 运动 (Enabled 设置 为 false) ,再 调用 自 定 
义 的 函数 模块 initGame。 


when PlayButton.Click 
do 


when ResetButton.Click 


call 
initGame 
set 


to 
Ball.Enabled 


to 
Ball.Enabled en 


6.69 按钮 单 击 事件 


自 定义 函数 initGame 用 来 初始 化 球体 控件 的 位 置 、 移 动 速度 .移动 方向 ,并 清空 分 数 
标签 控件 ValueLabel 的 文字 属性 Text, PAZ initGame 将 球体 的 位 置 设 置 到 (20,20)， 
球体 的 初始 速度 在 8 一 15 之 间 随 机 选择 ,球体 的 移动 方向 在 0 一 360 之 间 随 机 选择 , 如 
图 6.70 所 示 。 

球体 在 运动 时 碰撞 到 画布 边缘 ,将 产生 球体 的 EdgeReached 事件 。 根 据 游戏 规则 ， 
球体 碰 到 上 方 . 左 侧 和 右 侧 的 边缘 时 ,球体 会 按照 一 定 角度 进行 反弹 ;如 果 球 体 碰 到 下 方 
的 边缘 ,游戏 会 结束 ,球体 会 停止 在 触 磁 点 上 。 因 此 在 球体 的 EdgeReached 事件 中 ,首先 
要 检测 参数 edge 的 值 , 当 edge 为 一 1 时 ,表示 小 球 触 碰 到 画布 的 下 方 边缘 , 则 将 球体 的 
Enabled 属性 设置 为 false, 使 小 球 停止 移动 ,并 播放 表示 游戏 结束 的 音效 ; 当 edge 为 其 他 
值 时 ,调用 球体 的 方法 Bounce ,根据 参数 edge 进行 反弹 。EdgeReached 事件 的 内 部 模块 
如 图 6.71 所 示 。 

当 球 体 运动 碰撞 到 球 板 时 ,球体 应 当 按 照 一 定 角 度 进行 反弹 ,此 时 将 产生 球体 的 
CollidedWith 事件 。 在 球体 CollidedWith 事件 中 ,参数 other 表示 与 球体 碰撞 的 精灵 , 因 
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random integer tof number —- 
dte) 360 


6.71 球体 的 EdgeReached 事件 


为 画布 上 只 有 球体 和 球 板 ,因此 在 每 次 碰撞 事件 中 ,other 一 定 是 球 板 , 但 这 里 的 参数 
other 并 没有 被 使 用 。 在 CollidedWith 事件 中 ,首先 用 360 减 去 球 的 运动 方向 ,表示 球体 
碰撞 后 的 物理 反弹 ,然后 将 记分 的 标签 ValueLabel 的 数值 增加 1, 如 图 6.72 所 示 。 


图 6.72 球体 的 CollidedWith 事件 


Pong 示例 的 全 部 逻辑 模块 如 图 6. 73 所 示 。 
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图 6.73 Pong 示例 的 全 部 逻辑 模块 


= 题 


1. 说 明 图 像 精灵 和 球体 的 不 同和 相同 之 处 。 

2， 编 写实 现 * 新 画板 ”功能 , 当 手 指 单 击 屏幕 的 任意 两 个 位 置 时 ,以 这 两 个 位 置 作为 
和 抢 形 的 左上 角 和 右 下 角 绘 制 矩形 图 案 , 可 以 选择 三 种 不 同 的 颜色 ,并 可 随时 清空 画布 
内 容 。 

3. 编写 实现 “石头 剪子 布 ?游戏 ,实现 人 与 手机 的 石头 剪刀 布 游 戏 功能 ,每 比较 一 次 ， 
输出 获胜 一 方 的 信息 。 

4. 编程 实现 “打气 球 ” 游 戏 。 在 游戏 开始 后 ,画面 上 随机 出 现 10 个 球 ,这 些 气 球 是 
会 任意 蒜 动 的 ,用 户 要 在 最 短 的 时 间 内 击破 所 有 气球 ,完成 游戏 后 显示 玩家 所 使 用 的 
时 间 。 


数据 存储 与 访问 


App Inventor 提供 非常 简单 的 数据 存储 和 读 取 方 法 。 通 过 本 章 的 学 习 可 以 帮助 读 
者 掌握 App Inventor 中 实现 数据 存储 和 读 取 的 控件 TinyDB。 

本 章 学 习 目 标 

。 掌握 TinyDB 数据 存储 与 访问 方法 ; 

° 掌握 TinyDB 数据 更 新 和 删除 方法 。 


71 基础 功能 


在 开发 应 用 程序 过 程 中 ,经 常会 有 一 些 数 据 需 要 长 时 间 地 存储 起 来 ,以 便 在 需要 时 
可 以 立即 获取 到 这 些 数 据 。App Inventor 提供 了 简单 的 数据 存 取 控件 TinyDB, 是 一 种 
基于 NVP(Name/ Value Pair, 标 签 / 值 对 ) 的 数据 存储 方式 ,用 户 无 须 了 解数 据 的 存储 细 
节 , 就 可 以 根据 标签 在 数据 库 中 保存 . 读 取 数 据 。 

这 里 所 说 的 NVP 是 使 用 “标签 ”进行 数据 存储 的 模式 ,每 个 数据 对 应 一 个 标签 。 例 
如 ,用 户 需要 保存 一 个 叫 作 Lucy 的 名 字 , 只 需要 存 人 (name, Lucy) 就 可 以 了 ,这 里 的 
name 是 标签 , 值 是 Lucy。 在 从 数据 库 中 获取 这 个 数据 时 ,只 要 提供 标签 name, 就 能 在 数 
据 库 中 找到 需要 的 数据 Lucy。 当 然 , 用 户 也 可 以 保存 (1, HanMeimei)、(2, LiLei)、 
(ID001,18600001111) 和 (ID002,18600002222) 这 样 的 数据 。 

TinyDB 控件 属于 非 可 视 化 控件 ,由 于 其 广泛 的 适用 性 和 简单 的 操作 方法 ,在 应 用 程 
序 中 使 用 得 非常 广泛 。TinyDB 控件 的 添加 方式 依旧 是 将 其 拖 入 屏幕 区 ,控件 将 显示 在 
屏幕 下 方 的 非 可 视 控件 区 域内 ,如 图 7.1 所 示 。 

由 于 TinyDB 控件 是 功能 性 的 非 可 视 化 控件 ,因此 这 个 控件 没有 任何 可 编辑 属性 和 
触发 事件 , 仅 支 持 数 据 存储 (StoreValue) 和 数据 读 取 (GetValue) 两 个 方法 ,如 图 7. 2 
所 示 。 


call tag P 
TinyDB1.StoreValue  valueToStore 


tag r 


call 
7j TinyDB1.GetValue ] 


Non-visible components 


TinyDB1 


图 7.1 TinyDB 控件 图 7.2 数据 存储 和 数据 读 取 方 法 
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StoreValue 方 法 的 功能 是 将 数据 保存 到 数据 库 中 ,参数 tag 是 标签 , 参数 
valueToStore 是 被 存储 的 数据 ,被 保存 的 数据 既 可 以 是 字符 串 , 也 可 以 是 列表 。 在 图 7.3 
中 ,分 别 使 用 列表 和 字符 串 方式 ,将 数据 Tom、boy、20 保存 到 数据 库 中 。 


cal make a list 
item (7 text cal text 
"n ^ "Tom tss G oo02 


er E n tet d 
b Tom,boy,20' 
item | text 
20 


—s 
item (` 


TinyDB1.StoreValue 


图 7.3 数据 存储 示例 


GetValue 方法 的 功能 是 根据 标签 获取 数据 库 中 的 数据 ,参数 tag 是 标签 。 在 图 7.4 
中 ,GetValue 方法 的 tag 参数 是 0001, 因 此 根据 标签 0001 在 数据 库 中 进行 搜索 ,如 果 知 
道 匹配 的 标签 ,可 以 返回 标签 对 应 的 数据 ;如 果 没 有 找到 匹配 的 标签 , 则 返回 一 个 空 的 字 
符 串 。 因 此 ,要 检验 某 个 标签 下 是 否 有 存储 数据 ,只 要 检测 返回 值 是 否 为 空 即 可 。 


call tag | text 
N TinyDB1.GetValue Í 0001 
7.4 数据 提取 示例 


下 面 通过 DataRecorder 示例 介绍 TinyDB 控件 的 数据 存储 和 数据 提取 功能 。 
DataRecorder 示例 的 运行 界面 如 图 7.5 所 示 。 DataRecorder 
在 显示 “数据 内 容 ” 的 文本 框 中 输入 要 保存 的 数据 ， 


向 数据 库 写 入 内 容 | 


单 击 “ 写 人 数据 ”按钮 就 可 以 将 数据 存储 在 数据 库 中 ,在 bas. zs EN 
“数据 库 ? 标 签 下 方 以 (标签 ,数据 ) 的 形式 显示 ,并 在 “ 当 m 3 - 


前 条 目 数 ” 中 显示 数据 库 中 的 数据 总 量 。 数据 库 : 
用 户 在 显示 * 序 号 "的 文本 框 中 填 入 标签 , 单 击 “ 读 取 men asm cn 
数据 ”按钮 ,就 可 以 从 数据 库 中 提取 到 刚刚 存储 的 数据 。 
本 示例 的 所 有 标签 从 1 开始 自动 递增 ,例如 12 3.4 = 从 数据 库 读 取 内 容 
如 果 欠 入 的 标签 在 数据 库 中 不 存在 , 风 在 "数据 值 "标签 ”bug 号 :| | 
中 显示 “Not Found”, PEEEY 000 
如 图 7.6 所 示 为 DataRecorder 示例 界面 示意 图 。 为 
了 让 示例 更 为 简单 ,在 界面 编辑 器 中 将 两 个 文本 框 控件 ”图 7.5 DataRecorder 示例 的 
的 NumbersOnly 属性 设 为 true, 限 定 只 能 输入 数字 。 运行 界面 
在 模块 编辑 器 中 ,首先 定义 全 局 变量 Tag, 用 来 表示 数据 存储 的 标签 ,如 图 7.7 所 示 。 
接 下 来 开始 设计 数据 存储 的 过 程 。 当 用 户 单 击 “ 写 人 数据 ”按钮 时 ,将 文本 框 内 的 数 
据 存 人 数据 库 , 因 此 ,需要 给 数据 自动 指定 一 个 标签 。 
在 DataRecorder 示例 中 ,在 存储 数据 前 , 先 要 递增 全 局 变量 Tag, 目 的 是 为 了 避免 存 
储 在 数据 库 中 的 标签 重复 。 递 增 全 局 变量 Tag 和 存储 数据 的 模块 如 图 7. 8 所 示 。 


数据 什 : (2,55555) 
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7.6 DataRecorder 示例 界面 示意 图 


set Sabal ie global number 
Tag Tag jt 4 1 


call tag Í` global Ta 
TinyDB1.StoreVall 
eR Tag 2s namoeng n Tey, TextBoxWrite. Text 
图 7.7 自 定义 全 局 变量 Tag 图 7.8 数据 存储 模块 


在 完成 数据 存储 过 程 后 ,需要 在 界面 上 显示 存储 结果 ,并 清空 之 前 的 数据 内 容 , 以 便 用 
户 进行 下 一 次 输入 。 调 用 make text 方法 可 以 显示 形式 为 (1,1010101) 的 数据 ,如 图 7. 9 
所 示 。 

在 用 户 每 次 单 击 ButtonWrite 按钮 后 ,需要 判断 文本 框 是 否 为 空 。 如 果 结 果 为 空 , 则 
表示 用 户 并 没有 输入 内 容 , 则 忽略 用 户 的 按钮 单 击 行为 。 如 果 结 果 不 为 空 , 则 执行 数据 
存储 和 显示 更 新 功能 。Button Write 按钮 的 单 击 事件 如 图 7. 10 所 示 。 

数据 读 取 模块 如 图 7.11 所 示 ,在 槽 tag 上 拼接 上 用 户 在 文本 框 TextBoxRead 中 输 
人 的 标签 ,通过 调用 TinyDB1 控件 的 GetValue 方法 获得 数据 库 中 的 数据 。 

最 后 考虑 数据 访问 部 分 的 逻辑 : 当 单 击 “ 读 取 数 据 ” 按 钮 时 ,首先 判定 文本 框 内 的 内 
容 是 否 为 空 ,如 果 为 空 则 视 为 误 操作 ,忽略 此 次 运行 结果 。 如 果 文本 框 的 内 容 不 为 空 , 则 
将 文本 框 内 的 内 容 作为 标签 在 数据 库 中 进行 查找 。 查 找 完 成 之 后 ,首先 判定 查找 结果 是 
和 否 为 空 , 如 果 为 空 则 意味 着 数据 库 内 的 此 标签 下 没有 数据 存储 , 即 此 编号 的 数据 不 存在 ， 
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图 7.9 数据 存储 后 的 显示 更 新 模块 


图 7.10 ButtonWrite 按钮 的 单 击 事件 


图 7.11 数据 读 取 模 块 
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在 此 情况 下 对 用 户 做 出 *Error1” 的 提醒 ;如 果 数 据 不 为 空 , 则 将 提取 的 数据 在 LabelData X 
本 框 内 进行 显示 。 不 管 提 取 结 果 是 否 为 空 ,都 将 输入 用 的 文本 框 清空 ,以 待 下 一 次 输入 。 

用 户 每 次 单 击 ButtonRead 按钮 后 ,首先 判断 文本 框 是 否 为 空 和 数据 库 中 是 否 存 有 
有 效 数 据 , 如 果 任 何 一 个 条 件 为 false, 则 在 界面 上 标签 LabelData 显示 “Not Found”; f? 
则 将 数据 库 中 的 返回 结果 显示 在 标签 LabelData 中 。ButtonRead 按钮 的 单 击 事件 如 
图 7.12 所 示 。 


图 7.12 ButtonRead 按钮 的 单 击 事件 


DataRecorder 示例 的 完整 逻辑 模块 如 图 7. 13 所 示 。 


图 7.13  DataRecorder 示例 的 完整 逻辑 模块 图 
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72 高 级 功能 


7.1 节 中 介绍 了 TinyDB 控件 的 数据 存储 和 数据 读 取 功能 ,本 节 对 数据 的 更 新 和 删 
除 方法 进行 说 明 ,以 及 使 用 TinyDB 控件 的 一 些 注意 事项 。 

TinyDB 控件 没有 独立 的 更 新 和 删除 数据 的 方法 。 如 果 数 据 存储 中 使 用 的 标签 在 数 
据 库 中 已 经 存在 , 则 这 次 数据 存储 也 可 视 为 “数据 更 新 ”, 原 有 数据 会 被 新 数据 所 替换 。 
删除 数据 也 同样 要 使 用 数据 存储 方法 StoreValue, 将 参数 valueToStore W E 2: f. if 
图 7.14 所 示 , 原 有 数据 将 会 被 删除 。 

在 一 个 应 用 程序 中 ,多 个 TinyDB 控件 是 共享 存储 空间 的 。 即 使 使 用 多 个 TinyDB 
控件 ,标签 仍然 不 能 重复 ,否则 会 出 现 数据 覆盖 的 情况 ,因此 不 建议 在 应 用 程序 中 使 用 多 
个 TinyDB 控件 。 例 如 在 图 7. 15 中 ,分 别 向 数据 库 TinyDB1 和 TinyDB2 存储 一 条 数据 ， 
标签 都 为 “0001”, 先 向 TinyDB1 存储 数据 “Tom”, 再 向 TinyDB2 存储 数据 “Lily”, 此 时 
TinyDB1 和 TinyDB2 中 标签 “0001? 的 数据 都 是 “Lily”。 但 需要 注意 的 是 ,不 同 应 用 程序 
的 数据 库 是 各 自 独 立 的 ,不 能 通过 TinyDB 控件 在 不 同 应 用 程序 之 间 传 送 数据 。 


call tag | text 
0001 
TinyDB1.StoreValue  valueToStore (^ text 
Tom 
call call t text 
tas L, TP oo, a9 i" 0001 
TinyDBi.StoreValue  valueToStore C tes, | TinyDB2.StoreValue valueToStore vua 
7.14 通过 写 入 空 值 来 删除 数据 7.15 TinyDB 控件 共享 存储 空间 示例 


在 7.1 节 的 示例 中 ,使 用 自动 递增 的 数字 (变量 标签 ) 作 为 数据 存储 的 标签 ,这 种 方 
式 简 便 .高效 ,而 且 不 会 出 现 标签 重复 的 情况 。 变 量 标签 适合 有 规律 .数据 量 大 的 情况 ， 
对 于 突 发 性 .数据 量 少 的 情况 并 不 适合 。 

对 于 少量 的 数据 ,开发 人 员 一 般 会 采用 自 定义 标签 。 使 用 自 定义 标签 的 好 处 显 而 易 
见 , 首 先 自 定义 标签 比 变量 标签 更 为 灵活 ,而 且 便 于 搜索 数据 ;其 次 , 自 定义 标签 在 应 用 
的 开发 过 程 中 减少 了 开发 工作 量 , 简 化 了 逻辑 结构 ;最 后 , 自 定义 标签 也 更 适合 一 组 多 项 
的 数据 存储 ,如 存储 学 生 信息 时 ,可 能 需要 同时 存储 学 生 的 姓名 、 学 号 .班级 和 专业 等 多 
项 不 同 的 信息 ,在 这 种 情况 下 自 定义 标签 就 可 以 将 同一 组 的 条 目 关联 起 来 。 

当然 , 自 定义 标签 也 有 受到 限制 的 方面 ,最 大 的 限制 就 是 标签 可 能 会 出 现 重 友 。 例 
如 ,在 录入 学 生 信息 的 时 候 , 重 名 的 情况 就 可 能 导致 数据 库 的 数据 出 现 覆盖 或 者 误 删 除 
的 情况 。 这 个 问题 一 方面 可 以 通过 在 逻辑 中 添加 限定 来 解决 ,如 在 存 人 数据 之 前 先 判 断 
目标 标签 下 的 内 容 是 否 为 空 ,如 果 不 为 空 则 停止 数据 存储 并 给 出 提示 ; 另 一 种 方法 是 在 
数据 设计 时 ,选择 不 会 或 不 易 出 现 重 复 的 项 目 作 为 标签 ,例如 学 生 的 “学 号 ”就 比 使 用 “ 姓 
名 ”作为 标签 更 为 恰当 ,因为 学 号 和 学 生 的 条 目 一 一 对 应 ,而 且 不 会 出 现 重复 。 

TinyDB 控件 无 法 对 数据 库 中 的 内 容 进行 检索 。 仍 然 以 学 生 档 案 的 例子 来 说 , 当 以 
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学 号 作为 标签 存储 时 ,可 以 通过 学 号 获取 学 生 信息 ,但 是 不 能 以 姓名 或 者 班级 等 内 容 进 
行 检索 。 

TinyDB 控件 中 的 数据 只 有 当 用 户 下 载 并 安装 应 用 程序 之 后 才能 有 效 。 对 于 开发 测 
试 人 员 来 讲 , 如 果 在 测试 过 程 中 重新 启动 App Inventor 应 用 程序 或 者 中 断 调试 链接 , 数 
据 库 的 内 容 也 被 清空 ,因为 这 一 过 程 等 同 于 将 应 用 从 手机 当中 移 除 之 后 重新 载 和 。 


73 示例 一 注册 党 如 


在 Register 示例 中 ,使 用 TinyDB 控件 建立 一 个 数据 库 , 用 于 保存 用 户 的 用 户 名 、 密 
码 和 公司 名 的 信息 ,示例 有 “新 用 户 注册 ”功能 和 “用 户 登 录 ” 功 能 ,如 图 7. 16 所 示 。 用 户 
在 “新 用 户 注 册 ” 时 填写 的 信息 ,会 记录 在 数据 库 中 ,在 “用 户 登录 ”时 进行 验证 。 

在 用 户 成 功 登 录 后 会 进入 用 户 信 息 界面 ,可 以 查看 用 户 和 公司 名 称 信 息 , 并 可 以 进 
行 删除 用 户 操作 ,如 图 7.17 所 示 。 


用 户 信息 
Logged in 
密码 : 密码 
用 户 名 : tom 
Sun 公司 :iim 
Register new user or log in 确定 信息 MRAP 
7.16 Register 示例 的 注册 登录 界面 7.17 Register 示例 的 用 户 信息 界面 


垂直 布局 ModuleDisplay 是 用 来 承载 “用 户 信息 界面 ?的 布局 ,该 布局 在 程序 启动 时 
是 被 自动 隐藏 的 ,只 有 当 用 户 登 录 成 功 后 才 显 示 。 但 为 了 便于 界面 的 设计 与 开发 ,在 界 
面 编辑 器 中 将 ModuleDisplay 的 Visible 的 属性 设置 为 showing, 在 界面 开发 完成 后 , 运 
行 应 用 程序 前 ,将 Visible 的 属性 设置 为 hiding。 

Register 示例 的 界面 示意 图 如 图 7. 18 所 示 。 

Register 示例 的 逻辑 部 分 主要 是 处 理 4 个 按钮 的 单 击 事 件 ,分 别 是 Register 按钮 、 
Login 按钮 .Confirm 按钮 和 Delete 按钮 的 单 击 事件 。 

在 用 户 单 击 Register 按钮 进行 注册 时 ,用 户 注 册 首 先 要 判断 用 户 所 填写 的 信息 是 否 
完整 ,然后 判断 用 户 提 供 的 用 户 名 在 数据 库 中 是 否 已 经 存在 ,如 果 用 户 信息 完整 且 用 户 
名 在 数据 库 中 不 存在 , 则 将 用 户 提供 的 用 户 名 、 密 码 和 公司 名 存储 到 数据 库 中 ,最 后 清空 
用 户 在 界面 上 填写 的 数据 。 在 数据 存储 过 程 中 ,每 次 成 功 注册 都 产生 两 条 数据 : (用户 
名 ,密码 ) 和 (用 户 名 十 Corporation, 公 司 名 ) ,其 中 “用 户 名 ”和 “用 户 名 十 Corporation” 是 
这 两 条 数据 的 标签 。Register 按钮 单 击 事件 模块 如 图 7.19 所 示 。 
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图 7. 19 Register 按钮 单 击 事件 
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在 用 户 单 击 Login 按钮 进行 登录 时 ,首先 要 判断 用 户 所 填写 的 用 户 名 和 密码 信息 是 否 
完整 ,然后 判断 用 户 名 在 数据 库 中 是 否 存 在 ,如 果 用 户 提供 完整 的 用 户 名 和 密码 , 且 用 户 名 
在 数据 库 中 存在 , 则 将 用 户 名 作为 标签 在 数据 库 中 获取 “原始 密码 ”, 并 将 用 户 提供 的 密码 与 
原始 密码 进行 比较 ,如 果 密 码 匹 配 则 用 户 登 录 成 功 ,否则 登录 失败 。 登 录 成 功 后 ,显示 
“Logged in” 的 提示 信息 ,并 将 登录 和 注册 的 界面 布局 ModuleRegAndLogin 的 Visible 属性 
设置 为 false, 隐 藏 登录 和 注册 的 界面 :并 将 用 户 信息 的 界面 布局 ModuleDisplay 的 Visible 属 
性 设置 为 true, 显 示 用 户 信 息 界 面 。Login 按钮 单 击 事件 模块 如 图 7. 20 所 示 。 


7.20 Login 按钮 单 击 事件 


在 进入 用 户 信 息 界面 后 ,如 果 用 户 单 击 Confirm 按钮 ,会 显示 提示 信息 “Regist new 
user or log in”, 并 将 登录 和 注册 的 界面 布局 ModuleRegAndLogin 的 Visible 属性 设置 为 
true, 重 新 显示 登录 和 注册 的 界面 ;同时 将 用 户 信 息 的 界面 布局 ModuleDisplay 的 Visible 
属性 设置 为 false, 隐 藏 显示 用 户 信息 界面 。Confirm 按钮 单 击 事件 模块 如 图 7. 21 所 示 。 


7.21 Confirm 按钮 单 击 事件 
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在 进入 用 户 信息 界面 后 , 如 果 用 户 单 击 Delete 按钮 ,会 显示 提示 信息 “User 
deleted”, 同 时 显示 登录 和 注册 界面 ,隐藏 显示 用 户 信息 界面 ,并 将 数据 库 中 的 用 户 信息 
删除 。Delete 按钮 单 击 事件 模块 如 图 7. 22 所 示 。 


图 7.22 Delete 按钮 单 击 事件 


Register 示例 的 全 部 逻辑 模块 如 图 7. 23 所 示 。 


图 7.23 Register 示例 的 全 部 逻辑 模块 


Register 示例 实现 了 用 户 数 据 的 长 期 保存 ,在 应 用 程序 重新 启动 之 后 依然 有 效 ,仍然 
可 以 通过 注册 成 功 的 用 户 名 和 密码 进行 登录 。 
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= 题 


1. 简 述 TinyDB 控件 实现 基本 的 数据 存储 与 访问 功能 的 逻辑 步骤 。 

2. 如 果 在 一 个 应 用 程序 中 使 用 两 个 TinyDB 控件 ,能 够 实现 两 个 独立 的 数据 库 吗 ? 
为 什么 ? 

3. 如 何在 TinyDB 控件 中 实现 表 项 的 删除 和 更 新 操作 ? 

4， 编 程 实现 “抽签 程序 。 分 为 写 签 和 抽签 两 部 分 ,在 写 签 部 分 用 户 可 以 在 1 一 10 的 
序号 中 设置 一 个 中 奖 签 ,在 抽签 部 分 用 户 随 机 在 1 一 10 序号 中 抽签 ,并 显示 抽签 结果 。 


地 图 应 用 开发 


地 图 开发 是 当前 最 流行 的 应 用 ,也 是 最 有 潜在 需求 的 领域 。 通 过 本 章 的 学 习 , 读 者 
可 以 掌握 位 置 传 感 器 的 使 用 方法 ,以 及 如 何在 应 用 程序 上 使 用 谷歌 地 图 。 

学 习 目 标 : 

° 掌握 位 置 传感器 的 使 用 方法 ; 

。 了 解 不 同位 置信 息 获取 途径 ; 

° 掌握 通知 控件 的 使 用 方法 ; 

。 掌握 谷歌 地 图 的 使 用 方法 。 
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位 置 服务 (Location-Based Services. LBS) ,又 称 定 位 服务 或 基于 位 置 的 服务 ,融合 了 
GPS 定位 、 移 动 通信 、 导 航 等 多 种 技术 ,提供 与 空间 位 置 相关 的 综合 应 用 服务 。 定 位 服务 
可 以 获取 用 户 终端 的 位 置信 息 ,Android 系统 支持 GPS, WiFi 和 基站 信号 三 种 定位 方式 。 

位 置 传感器 (LocationSensor) 采 用 上 述 三 种 定位 技术 ,可 以 获 
取 手 机 的 经 度 .纬度 和 海拔 等 数据 。 位 置 传感器 是 非 可 视 化 控件 ， 
在 界面 编辑 器 中 的 显示 内 容 如 图 8. 1 所 示 。 

位 置 传感器 支持 较 多 的 属性 ,包括 定位 精度 .定位 硬件 .经纬 ESI 位 置 传感器 
E ,海拔 等 信息 ,全 部 属性 信息 和 说 明 如 表 8. 1 所 示 。 


表 8.1 位 置 传感器 属性 


属 性 属性 说 明 
Accuracy 设备 的 精确 度 ,单位 : 米 
AvailableProviders 可 用 的 位 置 服务 提供 硬件 
CurrentAddress 当前 所 在 位 置地 址 
Enabled 是 否 启 用 位 置 服务 
HasAccuracy 是 否 可 返回 设备 精确 度 
HasAltitude 是 否 可 返回 设备 高 度 
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续 表 
属 性 属性 说 明 
HasLongitudeLatitude 是 否 可 返回 设备 经 纬度 
Latitude 纬度 
Longitude 经 度 
Altitude 海拔 高 度 
ProviderLocked 锁定 位 置 服务 提供 者 
ProviderName 位 置 服务 提供 者 名 称 
TimeInterval 每 隔 多 长 时 间 显示 一 次 定位 信息 
DistanceInterval 每 隔 多 大 距离 显示 一 次 定位 信息 


位 置 传感器 支持 位 置 改变 事件 (LocationChanged) 和 位 置 服务 提供 者 状态 改变 事件 
(StatusChanged) ,如 图 8.2 所 示 。 位 置 改变 事件 在 手机 的 经 度 、 纬 度 和 高 度 发 生变 化 时 
产生 ,一 般 用 来 获取 这 三 项 数值 。 位 置 服务 提供 者 状态 改变 事件 在 位 置 服务 提供 者 的 状 
态 发 生变 化 时 产生 ,用 来 获取 位 置 服务 提供 者 的 基本 信息 和 状态 信息 。 


Wien LocationSensor1.StatusChanged provider (^ name 


provider 


when 
Men LocationSensor1.LocationChanged nr name iatitude 
longitude L. nome longitude 
altitude (^ name alttude 


8.2 位 置 传感器 支持 的 事件 


位 置 传感器 支持 LatitudeFromAddress 方法 和 LongitudeFromAddress 方法 , 如 
图 8. 3 所 示 。LatitudeFromAddress 方 法 可 以 从 地 址 中 获取 经 度 信 息 ， 
LongitudeFromAddress 方法 可 以 从 地 址 中 获取 纬度 信息 。 

为 了 能 更 好 地 理解 位 置 传感器 的 事件 和 属性 ,下 面 介 绍 可 以 获取 位 置信 息 和 位 置 服 
务 提 供 者 信息 的 LocationSensor 示例 。LocationSensor 示例 的 运行 界面 如 图 8.4 所 示 。 


LocationSensor 
位 置 传感器 输出 信息 
位 置 改变 事件 信息 : 

纬度 : 45.74164 

经 度 : 126.69624 


> 海拔 : 0.0 
TO DS UU 5 位 置 服务 提供 者 状态 改变 事件 信息 : 
服务 提供 者 : 未 知 


E LocationSensor1.LongitudeFromAddress eae r 状态 : 未 知 


8.3 位 置 传感器 支持 的 方法 8.4 LocationSensor 示例 的 运行 界面 
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在 手机 上 和 运行 该 示例 ,可 以 获取 到 手机 的 经 度 和 纬度 信息 ,笔者 的 海拔 信息 .服务 提供 者 
信息 和 状态 信息 处 于 未 知 状 态 。 

图 8. 5 是 LocationSensor 示例 的 界面 示意 图 ,该 示例 中 可 视 化 控件 只 有 标签 , 非 可 
视 化 控件 有 表格 布局 和 位 置 传感器 。 
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TableArangementt 
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位 置 传感器 输出 信息 
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Rename 


Non-visible components. 
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8.5  LocationSensor 示例 界面 示意 图 
LocationSensor 示例 的 逻辑 模块 比较 简单 ,只 有 两 个 关于 位 置 传感器 控件 的 事件 模 
块 ,LocationSensor 示例 的 全 部 逻辑 模块 如 图 8. 6 所 示 。 


X" LocationSensor1LocationChanged latitude (^ name 


longitude (^ name 


longitude. 


8.6  LocationSensor 示例 的 全 部 逻辑 模块 


82 通知 控件 


在 进入 8.3 节 “ 谷 歌 地 图 ”前 , 先 介绍 一 个 重要 的 通知 控件 Notifier, 这 是 一 个 非 可 视 
化 控件 ,如 图 8.7 所 示 。 
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通知 控件 提供 了 多 种 不 同 的 方式 与 手机 用 户 交互 信息 ,例如 在 屏幕 中 出 现 的 浮动 消 
息 ,以 及 弹出 的 选择 对 话 框 或 输入 对 话 框 ,如 图 8.8 所 示 。 


Text Dialog 


" Input the text 
Choose Dialog p 


OK CANCEL 


Non-visible components 


Notifier1 


图 8.7 通知 控件 图 8.8 Notifier 的 弹出 窗口 


Notifier 是 一 个 没有 属性 的 控件 ,支持 选择 后 事件 (AfterChoosing) 和 输入 后 事件 
(AfterTextInput) ,如 图 8.9 所 示 。 选 择 后 事件 ,用 户 在 选择 对 话 框 中 做 出 选择 后 产生 ， 
一 般 与 ShowChooseMessageDialog 方法 联合 使 用 ;输入 后 事件 ,用 户 在 文本 对 话 框 中 输 
和 并 返回 后 产生 ,一 般 与 ShowTextDialog 方法 联合 使 用 。 


when  Notifiert.AfterChoosing choice (7 name ——— | 
) choice1 


do d 
when Notifierl.AfterTextInput response P name 
i! 


E 


response1 | 


图 8.9 Notifier 事件 
Notifier 支持 7 种 方法 ,包括 显示 消息 对 话 框 .显示 选择 对 话 框 和 显示 文本 对 话 框 
等 ,如 表 8.2 所 示 。 
表 8.2 通知 控件 方法 


方 法 说 明 
ShowMessageDialog 显示 消息 对 话 框 ,只 有 一 个 按钮 ,可 设 定 按钮 显示 的 文字 
ShowChooseDialog 显示 选择 对 话 框 ,有 两 个 或 三 个 按钮 ,并 可 设 定 按钮 显示 的 文字 
ShowTextDialog 显示 文本 对 话 框 ,可 在 对 话 框 中 输入 文字 
ShowAlert 显示 警告 信息 
LogError 错误 信息 
LogInfo 提示 信息 
LogWarning 警告 信息 


下 面 用 Notifier 示例 说 明 如 何 使 用 通知 控件 产生 消息 对 话 框 ,获取 用 户 在 选择 对 话 
框 中 的 选择 和 在 文本 对 话 框 中 的 输入 。Notifier 示例 的 运行 界面 如 图 8. 10 所 示 , 用 户 在 
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单 击 不 同 的 按钮 后 ,会 产生 一 个 与 按钮 内 容 相对 应 的 对 话 框 或 者 提示 信息 。 
Notifier 示例 的 界面 示意 图 如 图 8. 11 所 示 ,界面 主要 由 按钮 和 标签 组 成 ,只 有 一 个 
非 可 视 化 控件 Notifierl 。 


Seen 9 seem | 
因 
[C Display hidden components in Viewer [A] abet 
GME 5o» PM BlisnowaertButton. 
BlisnowchooseDialogButton 
提示 信息 E snowmessageDiaiogButton 
示 信息 
_ 国 showrexpiaogButon 
显示 警告 信息 
选择 对 话 框 
消息 对 话 框 
文本 对 话 杠 
Rename ] [ Dete 
Media 
Non-visible components TETA 


8.10 Notifier 示例 8.11 Notifier 示例 界面 示意 图 


在 ShowAlertButton 按钮 的 单 击 事件 中 ,调用 通知 控件 的 ShowAlert 方法 ,在 手机 
屏幕 上 显示 浮动 的 提示 信息 ,如 图 8. 12 所 示 。 


when ShowAlertButton.Click 
eo [cai notice (^ text 
Notifier1.ShowAlert This is a alert message!!! 


This is a alert message! 


图 8.12 按钮 单 击 事件 和 警告 信息 


在 ShowChooseDialogButton 按钮 的 单 击 事件 中 ,调用 通知 控件 的 ShowChooseDialog 方 
法 ,在 手机 屏幕 上 显示 选择 对 话 框 ,如 图 8.13 所 示 。 模 块 各 个 参数 与 选择 对 话 框 中 显示 内 
容 的 对 应 关系 ,读者 很 容易 从 图 中 找到 。 参 数 cancelable 控制 着 Cancel 按钮 ,如 果 设 置 为 
true, 则 在 选择 对 话 框 中 出 现 Cancel 按钮 ,否则 将 不 出 现 Cancel 按钮 。 

当 用 户 在 选择 对 话 框 中 做 出 选择 后 ,将 产生 AfterChoosing 事件 ,参数 choice 代表 用 
户 的 选择 ,用 按钮 上 的 文字 表示 。 例 如 ,如 果 用 户 选 择 的 是 YES 按钮 , 则 参数 choice 是 
FITE YES”; 如 果 用 户 选择 的 是 Cancel 按钮 , 则 参数 choice 是 字符 串 “Cancel”。 在 
AfterChoosing 事件 中 ,只 是 将 用 户 的 选择 显示 在 标签 Labell 中 ,如 图 8. 14 所 示 。 
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When ShowChooseDialogButton.Click | 


message (7 text | 
Please Choose an option 


title text 
Choose Dialog 


button1Text text 
Notifier1.ShowChooseDialog 3 YES 
text 
true 


button2Text 
^4 NO 
cancelable 


Choose Dialog 


Please Choose an option 


YES NO Cancel 


图 8.13 按钮 单 击 事件 和 选择 对 话 框 


when Notifierl.AfterChoosing choice (^ name — — | 
l choice 


s to (7 cat text (^ text 


Your Choice: 


text| value 


Label1.Text make text choice 


text 


8.14  AfterChoosing 事件 


在 ShowMessageDialogButton. 按钮 的 单 击 事件 中 ,使 用 通知 控件 的 
ShowMessageDialog 方法 ,显示 消息 对 话 框 ,如 图 8. 15 所 示 。 参 数 message 是 消息 对 话 
框 中 的 信息 ;参数 title 是 消息 对 话 框 的 标题 ;参数 button Text 是 消息 对 话 框 中 唯一 一 个 
按钮 的 文字 提示 内 容 。 


When ShowMessageDialogButton.Click 


e° [car messat e( text. 
° L You will see a message” 
title text 
Message Dialo 
OK 


Notifier1.ShowWMessageDialog 
buttonText | text 


Message Dialog 


You will see a message 


BEL - ju 


图 8.15 按钮 单 击 事 件 和 消息 对 话 杠 
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在 ShowTextDialogButton 按钮 的 单 击 事件 中 ,使 用 通知 控件 的 ShowTextDialog J 
法 ,显示 文本 对 话 框 ,如 图 8.16 所 示 。 


when ShowTextDialogButton.Click | 
do 


°" mess: text 
š E Input the text 
title (^ text E 
Notifiert.ShowTextDialog Text Dialog 


cancelable 


' 
&> —— 


Text Dialog 


Input the text 


图 8.16 按钮 单 击 事件 和 文本 对 话 杠 


用 户 在 文本 对 话 框 中 输入 信息 后 ,如 果 单 击 OK 按钮 , 则 会 触发 AfterTextInput 事 
件 , 输 入 的 信息 会 被 传递 到 参数 response 中 ;但 如 果 用 户 单 击 的 是 CANCEL 按钮 ,参数 
response 将 获取 到 字符 串 "“CANCEL”。 在 AfterTextInput 事件 中 ,只 是 将 用 户 输入 的 信 
息 显 示 在 标签 Labell 中 ,如 图 8.17 所 示 。 


when Notifier1.AfterTextinput response (^ name 
response 


text (^ text 
0 Your Input: * 
text (^ value 


make text response 
text 


Label.Text 


8.17 AfterTextInput 事件 
Notifier 示例 的 全 部 逻辑 模块 如 图 8. 18 所 示 。 
T ShowTextDlalogButton Click OCOD CERE 


cai message [et 3j do 
Input the text. LEES 5 7 Please Choose an option. 
tite (^ et 
Notifiert.ShowTextDialog Tut DNO, kez 
canceianie 


a U U 


全 en ShowMesssgeDialogButton.Click 
do 


: E Hase wasaqa Lm — C 


choice. 


s 


= 9 = your Input: 7 — V 
xt (^ vate upan 
cS var sponse 47^ ShowAlertB utton.Click 
4o 
we æ notice Ç t. 
Notifier1.ShowAlert This is a alert message!!! 


图 8.18 Notifier 示例 的 全 部 逻辑 模块 
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83 谷歌 地 图 


谷歌 地 图 是 谷歌 公司 提供 的 电子 地 图 服务 ,可 以 提供 含有 政 区 、 交 通 和 商业 信息 的 
地 图 ,提供 不 同 分 辩 率 的 卫星 照片 ,并 且 可 显示 地 形 和 等 高 线 地 形 视图 。 图 8. 19 是 
Android 手机 中 的 谷歌 地 图 。 


和 * 
«Y 
asp? * 
站 外 区 x 


Z m QumAIN| sum 
$ xam 
nd * 
< E j 
& m 
人 和 和 名苑。 南岗 区 Rasa 
Gogsle 


8.19 Android 手机 的 谷歌 地 图 


在 App Inventor 中 使 用 谷歌 地 图 一 般 有 两 种 途径 ,一 种 是 使 用 WebViewer( 在 Not 
ready for prime time 中 ) , 另 一 种 是 使 用 ActivityStarter( 在 Other stuff 中 ) 。 

使 用 WebViewer 是 在 浏览 器 中 打开 谷歌 地 图 ,只 需 
将 URL 链接 地 址 传递 给 WebViewer 控件 的 GoToUrl 
方法 就 可 以 在 Web 浏览 器 中 打开 谷歌 地 图 。 例 如 ,希望 
获取 经 纬度 为 (45. 76,126. 70) 的 谷歌 地 图 ,GoToUrl Jy 
法 的 参数 构成 为 “http: //maps. google. com/maps?q = 


45.76,126.70”, 显 示 效 果 如 图 8. 20 所 示 。 不 推荐 使 用 f SER Ps 

这 种 方法 ,因为 使 用 的 并 不 是 正式 控件 ,而 且 显示 速度 和 | p. 0 M 

效果 并 不 十 分 理想 。 
使 用 ActivityStarter 是 在 新 的 屏幕 页 中 打开 谷歌 地 | 

图 ,只 需 将 URI 参数 传递 给 ActivityStarter 控件 的 d UM 


DataUri 方法 ,就 可 以 在 新 的 屏幕 页 中 打开 谷歌 地 图 。 这 
种 方法 的 地 图 显示 速度 和 效果 较 好 。 下 面 将 详细 介绍 =s 
ActivityStarter 控件 的 属性 .事件 和 方法 ,然后 通过 一 个 “上 89 和 S qip 
示例 介绍 如 何 使 用 ActivityStarter 浏览 谷歌 地 图 。 图 8.20 手机 浏览 器 的 谷歌 地 图 
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ActivityStarter 是 启动 其 他 程序 屏幕 页 的 控件 ,可 以 启动 其 他 App Inventor 程序 、 
摄像 头 程序 、Web 搜索 程序 和 谷歌 地 图 。AectivityStarter 是 非 ” [onvisible components 
可 视 化 控件 ,在 界面 控制 器 中 的 显示 如 图 8. 21 所 示 。 REA 

ActivityStarter 控件 只 有 一 个 AfterActivity 事件 ,在 打 
开 屏幕 页 (Activity) 后 产生 该 事件 ,其 参数 result 常用 于 获取 图 8.21 ActivityStarter 控件 
屏幕 页 的 返回 值 ,如 图 8. 22 所 示 。 

ActivityStarter 有 两 个 方法 : StartActivity 和 ResolveActivity。StartActivity 方法 
用 来 启动 目标 屏幕 页 ,在 相关 参数 设置 完毕 后 ,调用 该 方法 可 以 在 手机 上 直接 打开 新 的 
应 用 程序 。ResolveActivity 用 来 获取 屏幕 页 的 解析 结果 ,如 果 没 有 明确 指定 需要 打开 哪 
个 应 用 程序 , 则 需要 由 Android 系统 来 确定 ,这 个 方法 可 以 在 正式 打开 程序 前 ,尝试 获取 
Android 系统 的 解析 结果 。 如 果 ResolveActivity 方法 的 解析 结果 为 空 , 则 表示 没有 可 以 
被 打开 的 应 用 程序 。ActivityStarter 方法 如 图 8. 23 所 示 。 


| 
Won ActivityStarter.AfterActivity resut (7 ane on ^  activityStartert.ResolveActivity 
do 
call 
Activ r1.StartActivi 


8.22 AfterActivity 事件 8.23 ActivityStarter 方法 


通过 设置 ActivityStarter 的 属性 可 以 指定 启动 的 程序 ,每 项 属性 的 含义 可 以 参考 
K 8. 3。 
表 8.3 ActivityStarter 属性 


属 性 说 BB 属 性 说 明 
Action 动作 ExtraValue 键 值 
ActivityClass 类 名 Result 结果 返回 值 
ActivityPackage | 包 名 称 ResultName 结果 返回 值 名称 
DataUri 通用 资源 符 ResultType 结果 返回 值 类 型 
DataType 数据 类 型 ResultUri 返回 值 的 通用 资源 标识 或 数据 
ExtraKey 键 名 


下 面 将 要 启动 的 其 他 应 用 程序 分 为 5 类 ,分 别 来 介绍 如 何 设置 ActivityStarter 的 属 
性 值 来 启动 不 同类 型 的 应 用 程序 。 


1. 启动 其 他 App Inventor 应 用 程序 


启动 其 他 App Inventor 应 用 程序 只 需要 设置 两 个 参数 : ActivityPackage 和 
ActivityClass 。 

首先 要 从 App Inventor 中 下 载 目 标 程 序 的 源 代 码 , 因 为 需要 的 两 个 参数 值 就 在 目标 
程序 的 源 代 码 中 。 然 后 将 源 代 码 解压 缩 , 并 找到 文件 youngandroidproject/project. 
properties, 这 个 文件 是 保存 应 用 程序 基础 数据 的 文件 。 

打开 这 个 文件 后 ,可 以 看 到 以 “main” 开 头 的 第 一 行 ,这 里 就 是 需要 找 的 内 容 。 为 了 
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说 明 如 何 获取 ActivityPackage 和 ActivityClass 参数 ,下 面 以 LocationSensor 示例 
project. properties 文件 内 容 进 行 说 明 。 


main 一 appinventor. ai wangxianghui2013. LocationSensorEvent. Screenl 


name= LocationSensorEvent 


assets—.. assets 
source—../src 
build—. . /build 


versioncode— 1 


versionname-— 1l. 0 


文件 的 第 一 行 是 以 “main” 开 始 的 ,去 掉 “main 二 ”就 是 ActivityClass 参数 ,也 就 是 说 
ActivityClass 参数 的 值 应 该 是 appinventor. ai_ wangxianghui2013. LocationSensorEvent. 
Screen1。 将 ActivityClass 参数 的 最 后 一 部 分 (. Screen1) 去 掉 , 就 是 需要 的 ActivityPackage 
参数 ,因此 ActivityPackage 参数 为 appinventor. ai wangxianghui2013. LocationSensorEvent , 


2. 启动 手机 中 已 有 的 应 用 程序 


启动 手机 中 已 有 的 应 用 程序 需要 设置 三 个 参数 : Action, ActivityPackage 和 
ActivityClass。 下 面 以 摄像 头 程序 为 例 , 说 明 如 何 启动 手机 中 已 有 的 应 用 程序 。 

摄像 头 程序 是 手机 中 必 备 的 内 轩 ku sos sha 
软件 ,用 来 控制 手机 摄像 头 进行 录像 和 
拍照 。 如 果 要 找到 需要 的 参数 , 则 需 对 
基于 代码 的 Android 程序 设计 具有 一 Action android. intent. action. MAIN 
定 的 了 解 ,这 方面 的 内 容 可 以 参考 笔者 ActivityPackage | com. google. android. camera 
的 另 一 本 Android 书籍 《Android 应 用 ActivityClass com. android. camera. Camera 
程序 开发 )。 这 里 直接 给 出 需要 的 参 ” C C C C C a a 
数 , 如 表 8.4 所 示 。 


3. 启动 Web 搜索 程序 


这 里 假设 需要 搜索 的 内 容 是 “greatwall”, 则 需要 设置 的 参数 共 5 个 ,分 别 是 Action, 
ExtraKey,ExtraValue, ActivityPackage 和 ActivityClass, 具 体 参 数 设置 如 表 8. 5 所 示 。 


表 8.5 启动 Web 搜索 程序 的 参数 值 


参 WU 值 


参 # 值 
Action android. intent. action. WEB SEARCH 
ExtraKey query 
ExtraValue greatwall 
ActivityPackage com. google. android. providers. enhancedgooglesearch 
ActivityClass com. google. android. providers. enhancedgooglesearch. Launcher 
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4. 启动 浏览 器 ,并 打开 指定 的 网 页 


启动 手机 中 内 置 的 Web 浏览 器 ,并 打开 指定 链接 地 址 的 网 页 ,需要 设置 参数 Action 
和 DataUri 的 值 。Action 参数 设置 为 android. intent. action. VIEW ,表示 调用 手机 内 部 
程序 浏览 指定 的 内 容 , 但 具体 会 打开 哪个 程序 ,还 是 要 根据 所 指定 的 “浏览 内 容 *”。 第 二 
个 参数 DataUri 笔者 将 其 设置 为 http: //android. hrbeu. edu. cn, 其 实 只 要 出 现 “http” 的 
字样 ,Android 系统 就 会 调用 系统 内 部 的 Web 浏览 器 。 启 动 浏览 器 打开 网 页 的 参数 值 如 
表 8.6 所 示 。 


5. 启动 谷歌 地 图 ,显示 指定 地 点 


启动 谷歌 地 图 并 显示 指定 地 点 需要 设置 的 参数 依然 为 Action 和 DataUri。DataUri 
中 的 参数 为 “geo: 0,08.q— Potala Palace”, 其 中 “Potala Palace” 是 要 显示 的 在 图 上 的 地 
点 。 启 动 谷歌 地 图 并 显示 指定 地 点 的 参数 值 设 置 如 表 8. 7 所 示 。 


表 8.6 启动 浏览 器 打开 网 页 的 参数 值 表 8.7 启动 谷歌 地 图 的 参数 值 

参 Uu 值 2 8 值 
Action android. intent. action. VIEW Action android. intent. action. VIEW 
DataUri http://android. hrbeu. edu. cn DataUri geo:0,08.q— Potala Palace 


下 面 通过 DreamTour 示例 讲解 如 何在 应 用 程序 中 启动 谷歌 地 图 ,搜索 并 显示 指定 
位 置 的 地 图 。DreamTour 示例 的 用 户 界面 如 图 8. 24 所 示 。 


DreamTour "sl 
IQ isla de pascua 


8.24 DreamTour 示例 的 运行 界面 


界面 中 “选择 景点 ”下 方 的 4 个 小 图 片 是 可 以 单 击 的 按钮 , 单 击 不 同 的 小 图 片 会 显示 
不 同 的 景点 名 称 和 图 片 。4 个 小 图 片 分 别 是 复活 节 岛 石像 ,拉萨 布 达 拉 宫 、 纽 约 自 由 女神 
像 和 巴黎 埃菲尔 铁塔 。 选 择 不 同 的 景点 后 , 单 击 “ 打 开 地 图 ?按钮 可 以 启动 谷歌 地 图 ,并 
自动 搜 所 选择 的 景点 ,然后 将 指定 景点 的 位 置信 息 显示 在 地 图 上 。 

如 图 8. 25 所 示 为 DreamTour 示例 界面 示意 图 。 
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Viewer 
[Scent 


图 8.25 DreamTour 示例 界面 示意 


需要 注意 的 是 ,在 进行 ActivityStarter 的 属性 参数 设置 时 , Action 是 一 定 要 进行 设 
置 的 ,DataUri 是 在 模块 编辑 器 中 根据 用 户 的 选择 进行 设置 
的 。ActivityClass 和 ActivityPackage 参数 可 以 设置 ,也 可 
以 不 设置 。 如 不 设置 ActivityClass 和 ActivityPackage £ e 
数 , 在 手机 中 装 有 多 个 地 图 软件 时 ,会 提示 用 户 进行 选择 ， 
如 图 8. 26 所 示 。 

如 果 希 望 避 免 从 多 个 地 图 软件 中 做 选择 ,可 以 直接 打 
开 谷 歌 地 图 ,只 需要 将 ActivityClass 和 ActivityPackage 参 8.26 完成 动作 方式 选择 
数 按照 表 8. 8 进行 设置 即 可 。 


完成 动作 的 方式 


表 8.8 启动 谷歌 地 图 的 参数 值 


9? 数 值 x 型 
Action android. intent. action. VIEW 必 选 
DataUri geo:0,08.q— Isla de Pascua 必 选 ,模块 编辑 器 中 设 定 
ActivityClass com. google. android. maps. MapsActivity 可 选 
ActivityPackage com. google. android. apps. maps 可 选 


在 模块 编辑 器 中 ,创建 响应 4 个 按钮 的 单 击 事件 ,根据 用 户 单 击 的 按钮 不 同 , 选 择 不 
同 的 图 片 在 图 像 Imagel 上 显示 ,并 修改 标签 LabelInfo 的 显示 内 容 , 如 图 8. 27 所 示 。 

在 按钮 单 击 事件 中 ,LabelInfo 标签 使 用 的 是 英文 景点 名 称 , 景 点 名 称 的 中 英文 对 照 
如 表 8.9 所 示 。 

在 单 击 ButtonMap 按钮 后 ,调用 Notifierl 控件 的 ShowChooseDialog 方法 ,打开 选 
择 对 话 框 。ButtonMap 单 击 事件 模块 如 图 8. 28 所 示 。 
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when Button1.Click 
do 


when Button2.Click 
do 


set 


to [` tot 
Image1.Picture h2.png 


sot to (7 ied 
Labellnto.Text Potala Palace 

SA 

when Button4.Click 

do 


set 


set to 
Image1.Picture 


sot to [` ea 
Labellnfo.Text Isla de Pascua 


when Button3.Click 


to text 
Image1.Picture h4.png 


m to g text 
Labellnfo.Text Eiffel Tower 


[is to [` text 
Labellnfo.Text Statue of Liberty 


图 8.27 景点 按钮 单 击 事件 


表 8.9 景点 名 称 的 中 英文 对 照 


英文 名 称 中 文 名 称 英文 名 称 中 文 名 称 
Statue of Liberty 纽约 自由 女神 像 Isla de Pascua 复活 节 岛 石像 
Potala Palace 拉萨 布 达 拉 官 Eiffel Tower 巴黎 埃菲尔 铁塔 

when ButtonMap.Click 
do 
message P text 


Open Google map ? 
title 


text 
Question: 


button1Text 
Notifier1.ShowChooseDialog 
button2Text 


cancelable 


8.28 ButtonMap 按钮 单 击 事件 


根据 ShowChooseDialog 方法 的 参数 设 定 ,选择 对 话 框 的 内 容 如 图 8. 29 所 示 。 


Question: 


Open Google map ? 


8.29 ”选择 对 话 框 


用 户 在 选择 对 话 框 中 做 出 抉择 后 ,会 触发 Notifierl 控件 的 AfterChoosing 事件 , 根 
据 参 数 choice 的 值 ,判断 用 户 的 选择 。 因 为 用 户 可 以 选择 的 值 只 有 “YES” 和 “NO”, 因 此 
只 要 判断 choice 的 值 是 否 为 “YES”。 如 果 是 则 设置 ActivityStarterl 的 DataUri 属性 , 然 


后 调用 StartActivity 方法 打开 谷歌 地 图 ,如 图 8. 30 所 示 。 
DreamTour 示例 的 全 部 逻辑 模块 如 图 8. 31 所 示 。 
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图 8.30 AfterChoosing 事件 


8.31 DreamTour 示例 的 全 部 逻辑 模块 


= zz 


1. 讨论 位 置 服务 和 地 图 应 用 的 发 展 前 景 。 
2. 编程 实现 轨迹 追踪 软件 。 每 间隔 60s, 同 时 距离 移动 大 于 1m 的 情况 下 ,记录 一 次 
位 置信 息 ,在 数据 库 中 记录 600s 的 行动 轨迹 ,并 可 以 尝试 在 谷歌 地 图 上 显示 行动 轨迹 。 


附录 A 


Build-In( 内 置 ) 模 块 


Build-In 中 包含 Definition、Text、Lists、Math、Logic、Control 和 Colors 共 7 个 模块 
集 , 每 个 模块 集 的 使 用 说 明 如 附 表 A. 1 一 附 表 A.7 所 示 。 


A1 Definition 模块 集 (定义 模块 集 ) 


附 表 A. 1 Definition 模块 集 使 用 说 明 


名 称 模块 图 像 说 BB 
Ed procedure arg r 
procedure do 创建 无 返回 值 的 函数 
i procedureWithResult arg Ë 
procedureWithResult s 创建 有 返回 值 的 函数 


name 


自 定义 的 函数 参数 ,与 函数 的 


name Hi arg 拼接 
; m Er 自 定义 全 局 变量 ,可 以 在 程序 
variable ^ TER 的 任何 地 方 使 用 
ñ 使 用 此 模块 将 忽略 某 些 模块 
i. y 的 返回 值 ,也 可 作为 连接 器 
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A2 


Tex 模块 集 (文本 模块 集 ) 


附 表 A.2 Text 模块 集 使 用 说 明 


名 # 模块 图 像 说 上 明 
text ^ haee 定义 一 个 字符 串 型 常量 
Wem (| — | 将 指 定 的 两 个 字符 品 合 成 一 个 新 的 字符 
T PEN oh et 
length RET 获取 指定 字符 串 的 长 度 
texti (^ 
text< text< teo (! 判断 字符 串 textl 是 否 小 于 text2 
text! ” 
text= is 比较 两 个 字符 串 是 否 相等 
Ë text4 (^ 
text> text> text2 判断 字符 串 textl 是 否 大 于 text2 
trim anm EO 删除 指定 字符 串 首尾 的 空格 
upcase T 将 字符 串 所 有 字母 变 为 大 写字 母 
downcase omna EO a | 将 字符 申 所 有 字母 变 为 小 写字 母 
eall text (" 获取 字符 串 piece 在 字符 串 text 中 的 位 置 , 若 
starts at starts at piece p 匹配 成 功 则 返回 piece 字符 的 首 字 母 所 在 位 
置 , 若 未 找到 则 返回 0 
RES tH | 23 6 t text 中 包含 字符 串 piece, 则 返回 
contains 


contains piece 


true. ff Ul] 3& [n] false 


split at first 


call text P 
split at first at p 


以 字符 串 at 作为 分 隔 符 , 将 字符 串 test 在 at 首 
次 出 现 的 位 置 分 割 为 两 个 字符 串 ,并 返回 分 
后 的 字符 串 列表 。 如 果 at 不 存在 , 则 返回 原始 
字符 


模块 图 像 
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续 表 
说 HH 


split at first of any 


„ call text P 


split at first of any at n 
j 


at 是 分 隔 符 列表 ,字符 串 text 为 在 首 个 匹配 分 
隔 符 列 表 中 任何 一 个 分 隔 符 的 位 置 ,将 字符 串 
text 分 割 为 两 个 字符 串 , 并 返回 分 割 后 的 字符 
LEES 


" I tot 利用 特定 字符 将 字符 串 分 割 为 多 个 字符 串 ,并 
ph spit atf 返回 分 割 后 的 字符 串 列表 

> call text [” 
split at any splitatany at 与 split 相同 ,但 可 以 在 at 处 设置 多 个 参数 


xt (^ 


split at spaces oazi split at spaces te 利用 空格 来 分 割 字符 串 
„ eall text Ë 
m" ER 以 指定 开始 点 start 和 长 度 length 的 方式 ,截取 
mE segment 字符 串 text 中 的 一 部 分 字符 串 
length 
is text empty? ^ is text empty? text K 判断 text 是 否 为 空 字符 串 
„ call text r 
将 字符 串 text 中 原 字 符 串 (segment) 用 新 字符 
replace all replace all baa Eoee ue inia 
replacement 
A3 Liss 模块 集 (列表 模块 集 ) 
附 表 A.3 Lists 模块 集 使 用 说 明 
模块 名 称 BOX 模块 说 明 
~ cal make a list 创建 一 个 列表 ,类 表 中 的 元 素 在 模 item 上 
make a list xem 


i 


添加 


select list item 


i. J 
call list (` 


select list item index d 


取出 列表 index 索引 位 置 的 元 素 , 列 表 第 一 
个 元 素 的 索引 号 为 1 


LE 
call list É 
index 用 replacement 元 素 替 代 列 表 list 中 索引 位 
replace list item replace list item J | 置 为 index 的 元 素 


replacement Ë 
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模块 名 称 


BOX 


模块 说 明 


remove list item 


call list r 


remove list item index D 


RPE SSSR Ve) 


删除 列表 中 指定 索引 位 置 的 元 素 


insert list item 


call ist (7 


index n 
item 月 


| 


insert list item 


将 元 素 插 入 到 列表 中 的 指定 位 置 


length of list 


cal fist (^ 
< length of list 


获取 列表 中 元 素 的 数目 ,并 返回 该 值 


append to list 


call list1 Ë 
append to list Iist2 (^ ) 


将 列表 listl 和 列表 list2 合成 一 个 新 的 列表 


add items to list 


call fist (7 


add items to list item n 


RA Mri.) 


在 列表 最 后 位 置 加 入 指定 元 素 


is in list? 


call thing F: 
is in list? list "t 


判断 元 素 thing 是 否 在 列表 中 , 若 在 则 返回 
true, 不 在 则 返回 false 


position in list 


„ call thing Ë 
position in iist set (r) 


查找 元 素 (thing) 在 列表 中 的 索引 号 , 若 元 素 
在 列表 中 则 返回 该 索引 号 ,否则 返回 0 


pick random item 


call list (^ 
3 pick random item 


随机 取出 列表 中 的 一 个 元 素 


is list empty? 


call list 
d is list empty? 5 


判断 列表 是 否 为 空 , 若 为 空 则 返回 true, 1 JUI 
返回 false 


copy list , call Ovis list r 复制 列表 
ET 判断 指定 语句 (thing) 是 否 为 列表 ,若是 则 返 


call thin. 
了 is a list? 


In] true, 和 否则 返回 false 


list to csv row 


list (" 


call 上 
N list to csv row 


将 列表 中 的 元 素 依次 转化 为 CSV 表格 的 一 
行 ,并 将 该 行文 本 内 容 返回 ,返回 的 文本 尾 
部 没有 换行 符 


模块 名 称 


BOX 
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HB 
模块 说 明 


list to csv table 


call st (" 
E list to csv table 


将 列表 中 元 素 以 行 优先 的 方式 填充 到 CSV 
表格 (有 多 行 ) ,并 返回 该 表格 的 文本 值 ,表格 
中 每 行 的 元 素 以 逗号 隔 开 ,换行 时 以 ”\r\n” 
隔 开 


list from csv row 


call text 站 
"| list from csv row 


将 CSV 表格 中 的 一 行 中 每 一 个 值 转化 为 一 
个 列表 返回 


将 CSV 表格 中 的 内 容 以 行 优先 的 次 序 转化 


list from csv table e, call a text C 为 列表 返回 ,以 \n 或 CRFT(\r\n) 符 号 来 区 
分 不 同 的 行 
,, cali key (^ 
lookup in pairs pairs 0 返回 列表 (pairs) 中 与 关键 字 (key) 相 关联 的 
lookup in pairs T Jo | 值 , 若 未 找到 返回 notFound 的 值 


A4 Meth 模块 集 ( 数 学 模块 集 ) 


附 表 A.4 Math 模块 集 使 用 说 明 


模块 名 称 EN" 模块 说 明 
number Lm EXA MUS E Ht 
E TEI MEM voe BMEM fle — 
- | 
+ . 对 两 数值 进行 加 法 运算 ,并 返回 结果 
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续 表 
模块 名 称 BOR 模块 说 明 
z J- FI 对 两 数值 进行 减法 运算 ,并 返回 结果 
x Tm F1 对 两 数值 进行 乘法 运算 ,并 返回 结果 
/ "Er 对 两 数值 进行 除法 运算 ,并 返回 结果 
— 对 指定 数值 进行 平方 根 运算 ,并 返回 
sqrt 一 sqrt 结果 
random fraction . call utente 返回 一 个 在 0 和 1 之 间 的 随机 小 数 
call from Ë 


random integer 


random integer to P 


返回 一 个 指定 范围 内 的 随机 整数 ,通过 
from 和 to 设置 随机 整数 的 取 值 范围 


random set seed cal random set seed dum u 指定 一 个 数字 为 随机 数 生成 器 的 种 子 
negate EUREN, 返回 给 定数 字 的 相反 数 
min o A 返回 给 定 多 个 数字 中 的 最 小 值 
max LN 返回 给 定 多 个 数字 中 的 最 大 值 
was neal ' 返回 第 一 个 数字 除 以 第 二 个 数字 的 商 
quotient ü 
的 整数 部 分 
call e 返回 第 一 个 数字 除 以 第 二 个 数字 的 余 
remainder remainder P 数 ,余数 与 第 一 个 数字 同 号 , 例如 
| "fJ remainder(13. —4) —1 
;, cal r 返回 第 一 个 数字 除 以 第 二 个 数字 的 余 
modulo medulo (J 数 ,但 是 要 求 该 余数 与 第 二 个 数字 同 
| 号 ,例如 module(13, —4) — —3 
abs EN 返回 给 定数 字 的 绝对 值 
— 对 给 定数 字 进 行 四 含 五 人 运算 ,返回 值 
round E 
round 为 整数 
EIE 对 给 定数 字 进 行 舍 小 数 部 分 运算 ,返回 
Dor ^ ' floor 


值 为 整数 
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续 表 
模块 名 称 B X 模块 说 明 
ceilia zi FP 对 给 定数 字 进 行 无 条 件 进位 运算 ,返回 
E ^ ceiling 值 为 整数 


expt exponent 


call 


base P 


expt exponent 


指数 运算 ,base 为 指数 的 基数 ,exponent 
PEEL 


exp 计算 以 e(2.71828… ) 为 基数 的 指数 
log clo Ü 计算 给 定数 字 的 自然 对 数 
sin k sil on degrees r 计算 1E A (B 
cos & EN degrees y 计算 余弦 值 
tan call degrees r 计算 正切 值 
y tan 

asin à cab sin f HE IE 92 (8 
gus AENEA. EROR AR 
atan 本 Satan Ë 计算 反正 切 值 

call y M 
atan2 atan2 xÜ) 计算 y/x 值 的 反正 切 值 

——] 
O t dians 5 
s" pg ü ñ Al convert radians to degrees ds G 将 弧度 转化 为 角度 
onvert degrees e , 
E dicus TL l convert degrees to radians” ET 将 角度 转化 为 弧度 
"m E sasa q 将 数字 (number) 转 化 为 有 指定 小 数位 
wr M DEORSUM 数 (places) 的 数值 , 若 小 数位 过 多 则 进 


行 四 舍 五 入 ,不 够 则 补 0 


is a number? 


call ti 
is a number? 


hing (^ 


mmm 


判断 参数 thing 是 否 为 数值 ,若是 则 返 
El true, 和 否则 返回 false 
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A5 Logc 模块 集 (还 辑 和 运算 模块 集 ) 


附 表 A.5 Logic 模块 集 使 用 说 明 


模块 名 称 BOB 模块 说 明 
true ^ true 布尔 值 为 真 
false ^ false 布尔 值 为 假 
not sr 逻辑 非 运 算 
判断 两 参数 是 否 相 等 , 若 两 参数 为 数字 ,判断 其 
= J- F1 数值 是 否 相等 ;若是 字符 , 则 必须 完全 匹配 才 相 
= ——— 等 (区 分 大 小 写 ) 
" ies [ 逻辑 与 运算 ,车 测试 条 件 中 有 一 个 为 假 , 则 运算 
E "Earn 结果 为 假 (返回 false) ,否则 为 真 (返回 true) 
o ix [" 逻辑 或 运算 , 若 测 试 条 件 中 有 一 个 为 真 , 则 运算 
"Ic. 结果 为 真 (返回 true) ,否则 为 假 ( 返 回 false) 
A6 Ond 指令 集 ( 控 制 指令 集 ) 
附 表 A.6 Control 指令 集 使 用 说 明 
模块 名 称 模 模块 说 明 
和 判断 语句 , 若 指定 条 件 test 
证 amas ; 的 值 为 true, 则 执行 then-do 
区 域 中 的 语句 , 否则 跳 过 
-. 此 段 
5 J 
a 判断 语句 , 若 指定 条 件 test 
E 的 值 为 true, 则 执行 then-do 
区 域 中 的 语句 , 否则 执行 
Ise-do 
else-do 区 域 中 的 语句 
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续 表 
模块 名 称 B OX 模块 说 明 
, choose test K : 
NUES : 判断 语句 , 若 指定 条 件 test 
的 值 为 true, 则 执行 then-do 
区 域 中 的 语句 ,并 返回 then- 
š thi turn 
Chon y É return 的 值 ;否则 ,执行 else- 
do 区 域 中 的 语句 ,并 返回 
essem g else-return 的 值 
foreach variable 站 循环 语句 ,循环 次 数 为 列表 
do 中 元 素 的 个 数 ,变量 variable 
Aaa 次 序 取 列表 中 元 素 的 值 , 执 
mie ( 行 do 区 域 中 的 语句 
forrange variable [s 
stat (" 循环 语句 , 取 介 于 start 和 
end 之 间 且 间隔 为 step 的 
for range n 值 ,将 这 些 值 依次 传递 给 
SIER, variable 执行 do 区 域 中 的 
do 语句 
一 一 一 

while test (^ 循环 语句 , 当 指 定 条 件 test 
hile m = 的 值 为 true, 则 执行 do 中 的 
na Bi 语句 ,直到 test 值 为 false. 

—————u 跳出 循环 
打开 另 一 个 屏幕 页 ,屏幕 页 

open screenName 能 


another Screen 


call 
open another screen 


的 名 称 由 screenName 参数 
指定 


open another 
Screen with start 


value 


call screenName P 


open another screen with start value 


startValue P 


打开 另 一 个 屏幕 页 ,屏幕 页 
的 名 称 由 screenName 参数 
指定 ,并 向 屏幕 页 中 传递 一 
个 初始 化 参数 


get start value 


call 
"| et start value 


获取 屏幕 页 的 一 个 初始 化 
参数 , 若 无 则 返回 一 个 为 空 
的 字符 


close screen ESSE seen 关闭 当前 的 屏幕 页 
close screen 关闭 当前 屏幕 页 ,并 向 父 界 


with value 


result y 
) 


call 
close screen with value 


面 返回 一 个 参数 
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续 表 
模块 名 称 B OX 模块 说 明 

当 一 个 应 用 的 某 一 屏幕 页 
get plain start 被 其 他 应 用 打开 时 ,向 该 窗 
text X9 e a sacs | lain start text 口传 递 一 个 初始 化 该 屏幕 

页 的 字符 串 
close screen with call Te P 关闭 当前 屏幕 页 ,并 返回 一 
plain text close screen with plain text ) 个 字符 串 给 父 屏幕 页 
close application eall close application 关闭 当前 应 用 程序 


A7 Cas # 2 (€ SCTR TAXE) 


在 该 模块 集中 ,系统 提供 了 14 种 预定 义 的 颜色 ,用 户 也 可 以 自 定 义 颜 色 模 块 。App 
Inventor 中 的 颜色 是 以 编码 形式 存在 于 系统 中 ,每 种 颜色 由 4 个 参数 唯一 确定 ,每 个 参数 
的 取 值 范围 都 是 0~ 255。 前 三 个 参数 代表 红 (R) 5C GO 、 蓝 (B) 三 原色 的 强度 ,第 四 个 参 
数 为 不 透明 度 (Opacity) 。 

附 表 A.7 Colors 模块 集 使 用 说 明 
模块 名 称 模 块 模块 说 明 


创建 一 个 内 建 颜色 库 中 没有 的 颜色 ， 


call make color components f components 为 创建 该 颜色 的 参数 列 
表 , 列 表 中 应 有 4 个 元 素 


make color ^ 


split color UNE, pra ORASEBNE 
None Ë CET NOE 无 色 
Black m 
Blue "3 
Cyan & Ene. n 青色 


Dark Gray eol 


or 
Dark Gray 
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续 表 
模块 名 称 BOX 模块 说 明 
Gray 灰色 
Green Eee een 绿色 
Light Gray b ui | 浅 灰 色 
"a — 
Orange ^*^ orange HE 
Pink br | 粉红 色 
Red 红色 
White 上 白色 
Yellow — "SP yellow 黄色 


附录 B 
控件 简介 


B1 Basic( 基 本 ) 控 件 


基本 控件 共 10 个 ,包括 Button, Canvas, CheckBox, Clock, Image, Label, ListPicker, 


PasswordTextBox, TextBox 和 TinyDB ,各 个 控件 的 事件 .属性 和 方法 如 附 表 B. 1 一 附 
表 B. 10 所 示 。 


1. Button( 按 钮 ) 


Button 是 界面 上 最 基本 的 控件 ,主要 提供 单 击 式 的 触发 操作 ,实现 最 基本 的 人 机 交 
互 功能 。 


附 表 B.1 Button 控件 说 明 
模块 名 称 模块 及 模块 说 明 


when  Button.Click 
Click GE fF) do 按钮 单 击 事件 


——————— 


when  Button.LongClick 
LongClick( 事 件 ) do 按钮 长 时 间 单 击 事件 


——————— 


when Button'.GotFocus 
GotFocus E ff) do 获取 焦点 事件 


—————————— 5 


when Buttoni.LostFocus 
LostFocus GE fF) do 失去 焦点 事件 


qq. 
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续 表 
模块 名 称 模块 及 模块 说 明 


set to r[ 
Button1.BackgroundColor | ^ Button1.BackgroundColor 


BackgroundColor (J FE) 


按钮 背景 色 


E ep. 
Enabled Jil PE) Button1. Enabled J Button1.Enabled 


按钮 可 用 性 
set to P Ë 
Image( 属 性 ) Button1Image ) ”Button1.Image 
按钮 的 背景 图 片 
Text( 属 性 ) É Button1.Text s D ^ Button1.Text 
按钮 显示 的 文本 


°°! Button1.TextCol LIN 
TextColor Jii FE) utton1.TextColor ) ^, Button1.TextColor 


按钮 的 文本 颜色 


set 


Visible( 属 性 ) Button1.Visible 让 , ^ Button1.Visible 


按钮 的 可 见 性 


set to N 
Width( 属 性 ) Button1.Width ) ^_Button1.Width 
按钮 的 宽度 


n E du 4. Height 
Height B HE) Button1.Height utton1.He! 


按钮 的 高 度 


x component 
Buttonl 3c ffi] ) Button 


按钮 的 实例 


2. Canvas( iE f ) 


Canvas 是 一 种 可 在 其 上 绘制 图 像 的 控件 ,除了 作为 绘制 图 形 的 承载 体 以 外 ,还 经 常 
作为 游戏 的 背景 画面 。 
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模块 名 称 


附 表 B.2 Canvas 控件 说 明 


模块 及 模块 说 明 


Dragged GEF) 


RFH 

startX.startY; 表示 拖 电 起 始 
位 置 的 坐标 值 ; 
prevX、prevY: 表示 上 一 
Dragged 事件 的 坐标 值 ; 
currentX,currentY ; 表示 当前 
拖 中 点 的 坐标 值 ; 
draggedSprite: 判断 精灵 是 否 
icti u 


Flung( 事 件 ) 


快速 滑动 事件 ， 

xy: 滑动 事件 初始 坐标 ; 
speed: 滑动 事件 的 速度 (单位 
为 像素 /毫秒 ); 

heading: 滑动 事件 的 角度 (0 一 
360); 

xvel、yvel: WREE X HHJ Y HH 
的 分 量 ， 

flungSprite: 判断 滑动 起 始点 
附近 的 精灵 


Touched( 事 件 ) 


触 碰 事 件 ， 

x. y: 触 控 点 的 X. Y Sh A 
标 值 ; 

touchedSprite; 判断 触 控 事件 
是 否 被 触发 


TouchDown( 事 件 ) 


按 下 事件 ， 
xy: 手指 按 下 时 触 控 点 的 X. 
Y 轴 坐 标 值 


TouchUp( 事 件 ) 


抬 起 事件 ， 
xy: 手指 抬 起 时 触 碰 点 的 X. 
Y fi bg (B 


Clear Jr iE) 


清空 画布 元 素 , 如 果 画 布 上 已 
设置 图 片 ,此 图 片 会 被 清除 


模块 名 称 


na 控件 简介 
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续 表 


模块 及 模块 说 明 


DrawCircle( 方 法 ) 


在 画布 上 绘制 圆 形 图 案 , 其 
中 ,x 和 y 为 圆心 坐标 ,r 为 
半径 


DrawLine( 方 法 ) 


在 画布 上 从 (xl,y]) 点 到 (x2， 
y2) 点 绘制 直线 


DrawPoint( 方 法 ) 


在 画布 上 绘制 圆 点 图 案 ,位置 
坐标 为 (x,y) 


DrawText( 方 法 ) 


在 画布 上 坐标 为 (x,y) 的 位 置 
显示 文本 text 的 内 容 


DrawTextAtAngle( 方 法 ) 


在 画布 上 坐标 为 (x,y) 的 位 置 
以 angle 角度 显示 文本 text 的 
内 容 


GetBackgroundPixelColor 
(方法 ) 


获取 画布 上 坐标 为 (x,y) 点 的 
背景 颜色 


GetPixelColor( 方 法 ) 


获取 画布 上 坐标 为 (x,y) 点 的 
颜色 


SaveAs( 方 法 ) 


将 画布 当前 状态 截图 存储 在 
SD 卡 上 ,文件 名 为 fileName 
(只 能 是 JPEG、JPG、PNG 文 
件 ), 并 返回 该 文件 的 完整 存 
储 路 径 


Save( 方 法 ) 


将 画布 当前 状态 的 截图 存储 
在 SD 卡 上 ,并 返回 该 文件 完 
整 的 存储 路 径 
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模块 名 称 模块 及 模块 说 明 


set to P 


.| M 1.Back dCol 
BackgroundColor (JR tE) Canvas1.BackgroundColor j anvas1.BackgroundColor 


画布 背景 色 


op 


et 
Canvas1.Backgroundlmage J ^, Canvas1.Backgroundlmage 


BackgroundImage Jš FE) 


画布 背景 图 片 


set 


FontSize( 属 性 ) Canvas1.FontSize of ^ Canvas1.FontSize 
画布 字体 大 小 


Set 


Canvast.LineWidth. 0 ^ Canvasi.LineWidth 


LineWidth Jš PE) 
画笔 宽度 (绘制 直线 时 ) 


Set 


Canvas1.PaintColor 5 r ^_Canvas1.PaintColor 


PaintColor( 属 性 ) 


画笔 颜色 
set to 
Visible( 属 性 ) Canvas1.Visible ”Canvas1.Visible 
画布 可 见 性 
" s. 
Width Cj FE) Canvas1.Width Canvas1.Width 
画布 的 宽度 
E C: 1.Height lr Canvas1.Height 
Height Jib fk Mente NM T. Canvas. Height 
画布 的 高 度 
Canvasl( 实 例 ) 
画布 的 一 个 实例 


3. CheckBox( 复 选 框 ) 


CheckBox 是 可 以 同时 选中 多 项 的 选项 框 ,供用 户 在 不 同 选项 间 进 行 多 项 选择 时 使 
用 ,在 程序 当中 起 到 条 件 识 别 的 作用 。 
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附 表 B.3  CheckBox 控件 说 明 
模块 名 称 模块 及 模块 说 明 


复 选 框 状态 改变 事件 (选中 或 
Changed( 事 件 ) ee. 


GotFocus( 事 件 ) 获取 焦点 事件 


LostFocus( 事 件 ) 失去 焦点 事件 


^ CheckBoxi eckgroundcolor | 
BackgroundColor( 属 性 ) CheckBox1.BackgroundColor 


复 选 框 的 背景 颜色 


Checked R HE) BE ^ CheckBoxt.Checked | 


复 选 框 是 否 被 选中 


^c Box1. 
Enabled Jf HE) 7 cento nanea "Ô -Check&oxt Enabled | x1.Enabled 


复 选 框 是 否 可 用 


"UG ËI 
FontSize( 属 性 ) E _CheckBoxt.Fontsize | FontSize 


复 选 框 字体 大 小 


Te 人 T ressorton P - cientos 


复 选 框 的 文字 


TextColor( 属 性 ) checkeor texcolor "| ”CheckBox1.TextColer _ | 


复 选 框 的 文本 颜色 


rece 
Visible( 属 性 ) 7 ciao ane "Í CheckBox!. Visible 


复 选 框 是 否 可 见 
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续 表 
模块 名 称 模块 及 模块 说 明 
x n... kBox1.Width 
Width( 属 性 ) CheckBox1.Width eckBox1.Widtl 
复 选 框 的 宽度 
5 hi H Br. c 4. Height 
Height URHE) CheckBoxt.Height heckBox1.Heigh 


复 选 框 的 高 度 


CheckBoxl( 实 例 ) eckBox 


复 选 框 的 一 个 实例 


4. Clock( 时 钟 ) 


Clock 是 非 可 视 化 组 件 , 可 以 获取 当前 时 间 ,格式 化 输出 时 间 、 对 时 间 进 行 运算 ,还 可 
以 在 固定 的 时 间 间 隔 触发 事件 。 
附 表 B.4 Clock 控件 说 明 


模块 名 称 模块 及 模块 说 明 
when Clock1.Timer 
Timer( 事 件 ) do 时 钟 触发 事件 
—— 


SystemTime( 方 法 ) 7" Clockt.SystemTime 2 ENSE 
Now( 方 法 ) dico 从 手机 时 钟 读 取 的 当前 时 间 


通过 “月 /日 /年 时 : 分 : 秒 ”、 


MakeInstant( 方 法 ) MT “月 /日 /年 "时 ,分 "的 格式 定 
OE O AAA 


MakelInstantFromMillis i =s x x WE 
(方法 ) Clock1.MakelnstantFromMillis D 通过 毫秒 数 定义 时 间 点 


" i 从 1970 年 1 月 1 日 开始 累计 到 
GetMillis( 方 法 ) ^ l Clecki.GetMillis EST 现在 的 时 间 ,单位 为 毫秒 


Ka JEEN r 计算 instant. 上 增加 若干 秒 以 后 


AddSeconds( 方 法 ) Clock1.AddSeconds seconds D 的 时 间 点 
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续 表 
模块 名 称 模块 及 模块 说 明 
. 计算 instant. 上 增加 若干 分 钟 以 
计算 instant 增加 若干 小 时 以 后 
EE 计算 instant 增加 若干 天 以 后 的 
nem aem iod 
nstant 增加 着 干 周 以 后 的 
AddWeeks( 方 法 ) 时 间 点 
a P 
计算 instant 增加 若干 年 以 后 的 
š 计算 两 个 时 间 点 start 和 end 的 
Second( 方 法 ) 上 获取 instant 时 间 点 的 秒 数 
Minute( 方 法 ) 6 99 cicer Mnute P 获取 instant 时 间 点 的 分 钟 数 
Hour( 方 法 ) IEEE 获取 instant 时 间 点 的 小 时 数 
获取 instant 时 间 点 的 日 期 ,范围 
获取 instant 时 间 点 是 周 几 , 范 围 
Weeds or ME 为 puamia 
名 称 
— -9 coc ons "l 获取 instant 时 间 点 的 月 份 数 , 范 


围 为 1 一 12 的 数字 
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续 表 
模块 名 称 模块 及 模块 说 明 
MonthName( 方 法 ) Ë BET s -at 时 间 点 的 月 份 ,用 名 
Year( 方 法 ) b eidcm 6 8 获取 instant 时 间 点 的 年 份 
FormatDateTime( 方 法 ) Ë RENT um e 出 instant 时 间 点 的 日 
FormatDate( 方 法 ) ü GET : : 化 输出 instant 时 间 点 的 
FormatTime( 方 法 ) al loc FormatTime instant " : E 化 输出 instant 时 间 点 的 


TimerAlwaysFires( 属 性 ) 


set to P 
Clock1.TimerAlwaysFires J ^ Clock1.TimerAlwaysFires 
设置 时 钟 是 否 多 次 触发 


TimerlInterval( 属 性 ) 


set to K 
Clock1.Timerlnterval J ^ Clock1.Timerlnterval 


设置 时 间 定时 器 的 时 间 间 隔 


TimerEnabled( 属 性 ) 


Set to r 
Clock1.TimerEnabled ^ Clock1.TimerEnabled 
时 钟 是 否 可 用 


Clock1( 实 例 ) 


5. Image( 图 像 ) 


component 
d Clock1 


时 钟 的 一 个 实例 


Image 控件 用 于 在 界面 上 显示 各 种 图 像 文件 ,不 支持 事件 。 


附 表 B.5 Image 控件 说 明 


模块 名 称 模块 及 模块 说 明 
Animation( 属 性 ) Ë Image1.Animation » D 设置 动态 图 片 
Set | 3 tof Ë I 
Picture( 属 性 ) mage1.Picture Image1.Picture 


图 片 背景 


模块 名 称 


wO mama I 


续 表 
模块 及 模块 说 明 


Visible( 属 性 ) 


set 


to r 
Image1.Visible ”Image1.Visible 
图 片 可 见 性 


Width( 属 性 ) 


set to P 
Image1.Width ^_Image1.Width 


图 片 的 宽度 


Height R HE) 


set 


Image1.Height $ W ”Image1.Height 
图 片 的 高 度 


Imagel( 实 例 ) 


6. Label( 标 签 ) 


component 
di Image1 


图 片 的 一 个 实例 


标签 主要 起 到 文字 显示 的 作用 ,但 标签 不 允许 用 户 进行 输入 操作 ,只 能 够 显示 文字 


信息 。 
附 表 B.6 Label 控件 说 明 
模块 名称 模块 及 模块 说 明 
set g " 
BackgroundColor Jš FE) i abat Backgroundcolors ^_Label1.BackgroundColor 
标签 背景 颜色 
Set to r 
FontSize JB tE) Label1.FontSize ”Label1.FontSize 
标签 字体 大 小 
Text( 属 性 ) Pianto Ü, ^ LabeltTex | 
标签 栏 里 显示 的 文字 
set to r 
TextColor( 属 性 ) Labeli.TextColor — j^ Labell.TextColor 


标签 的 文字 颜色 
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模块 名 称 模块 及 模块 说 明 


Set to P | 


Label1.Visible ) ^_Label1.Visible 


Visible( 属 性 ) 
标签 可 见 性 


e 


set 
Label1.Width ) ^. Labelt.Width | 


Width( 属 性 ) 
标签 的 宽度 


Set 


to r 
Height Jš PE) Label1.Height ) ”Label1.Height 


标签 的 高 度 


component 
"| Label1 


标签 的 一 个 实例 


Labell (实例 ) 


7. ListPicker( 选 项 列表 ) 
ListPicker 是 从 多 个 选项 中 选取 某 一 个 选项 的 控件 ,适合 多 选 一 的 情况 。 
附 表 B.7 ListPicker 控件 说 明 
模块 名 称 模块 及 模块 说 明 


when 
" M ListPicker1.BeforePicking 选 前 事件 , 当 点 开 选 项 列表 ， 
UMS g 但 没有 选择 其 中 的 某 项 时 产生 


————————— 


when  ListPicker1.AfterPicking i 
M ` fk o ES 并 
AfterPicking( 事 件 ) do . E E. * 


— 3 


when ListPickerl.GotFocus 
GotFocus( 事 件 ) do 获取 焦点 事件 


—————— 


when  ListPickert.LostFocus 
LostFocus GE ff) do 失去 焦点 事件 


————————— 


Open( ik) E ListPickeri.Open 打开 选项 列表 供 选择 
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续 表 
模块 名 称 模块 及 模块 说 明 


BackgroundColor( 属 性 ) istpietert actgrounacalor '° Ü TR 


选项 列表 的 背景 颜色 


| 
Elements( 属 性 ) T a ListPicker1.Elements 


选项 列表 的 元 素 内 容 


性 ) 
从 to 中 导入 选项 列表 的 元 素 内 容 


Enabled( 属 性 ) Ef ^ ListPickert.Enabled 


选项 列表 可 用 性 


^ ueteletert image | 
Image Ci f) REESE ListPickert.Image 


选项 列表 的 图 片 


Selection( 属 性 ) 


用 户 选 中 的 列表 项 属性 


¿k 1.Selecti ii 
SelectionIndex Jš E) Wy _ListPicker1.Selectionlndex 


用 户 选中 的 列表 项 序号 


Text( 属 性 ) T eperen Ten "Í, _ListPicker1.Text_ 


选项 列表 显示 的 文本 内 容 


TextColor( 属 性 ) CL, ”ListPicker1.TextColor 


选项 列表 的 文本 颜色 


Visible( 属 性 ) uapeknwap '° Ü) ”ListPicker1.Visible 


选项 列表 的 可 见 性 


174 Qux (hal fz À 4i A — 35 A # Z 3€ 2 Opp chuento 


模块 名 称 模块 及 模块 说 明 


Set to & 
ListPicker1.Width ^ ListPicker1. Width 
Width Jš BE ) eker’ L Icker i 


选项 列表 的 宽度 


5% ListPick 1.Height oe i 
Height( 属 性 ) cxer nelg | ”ListPicker1.Height 


选项 列表 的 高 度 


Ë component 
ListPickerl( 实 例 ) ListPicker1 


选项 列表 的 一 个 实例 


8. PasswordTextBox( 密 码 框 ) 


PasswordTextBox 是 一 种 特殊 的 文本 框 ,一 般 用 于 接受 用 户 输入 密码 ,用 户 输 入 密 
码 时 ,密码 框 会 对 输入 的 内 容 进行 屏蔽 处 理 。 
附 表 B.8  PasswordTextBox 控件 说 明 
模块 名 称 模块 及 模块 说 明 


when PasswordTextBox1.GotFocus 
GotFocus( 事 件 ) do 获取 焦点 事件 


et 


when PasswordTextBox1.LostFocus 
LostFocus( 事 件 ) do 失去 焦点 事件 


———————— 


pe t 
Background PasswordTextBox1.BackgroundColor š: [ ^ PasswordTextBox1. BackgroundColor 
Color Jii f£) 
密码 框 的 背景 色 
passwordTextBox1.E EET. | 
Enabled( 属 性 ) ER extisoxT:c apio] PasswordTextBox1.Enabled 
密码 框 是 否 可 用 
Eu rdTextBox1.FontSi “PB dTextBox1.FontSi: | 
FontSize( 属 性 ) 'asswol € ox1.FontSize asswordle: ox1.FontSize 


密码 框 字体 大 小 
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续 表 
模块 名 称 模块 及 模块 说 明 
-中 
Hint( 属 性 ) PasswordTextBox1.Hint ) ”PasswordTextBox1.Hint 
密码 框 的 提示 信息 


set to & 
PasswordTextBox1.Text J ^ PasswordTextBox1.Text 


Text i FE) 
密码 框 里 显示 的 文字 
ks PasswordTextBox1.TextColor CN ^ ,PasswordTextBox1.TextColor | 
TextColor( 属 性 ) J 
文本 的 颜色 

` p dTextBox1.Visibl Ed dTextBox1.Visibl 

Visible( 属 性 ) asswordTe: ox1. Visible J asswordTe: ox1. Visible 
密码 框 是 否 可 见 

P: P. rdTextBox1.Width CIN ^P: dTextBox1.Width 

Width( 属 性 ) asSWord TextB cx1. 


密码 框 的 宽度 


set to [ 
PasswordTextBox1.Height ^ PasswordTextBox1.Height 


Height JB HE) 


密码 框 的 高 度 
PasswordTextBox Ee PasswordTextBox1 
1( 实 例 ) 
密码 框 的 一 个 实例 


9. TextBox( 文 本 框 ) 


TextBox 是 一 种 供用 户 进行 输入 文字 的 容器 。 虽 然 文本 框 可 以 显示 文字 信息 ,但 其 
主要 的 功能 还 是 为 用 户 提供 输入 信息 的 区 域 ,比如 登录 框 、 搜 索 栏 或 是 编辑 文字 的 写字 
附 表 B.9 TextBox 控件 说 明 


模块 名 称 模块 及 模块 说 明 


when TextBox1.GotFocus 
GotFocus( 事 件 ) do 获取 焦点 事件 


3 


176 Qu«sx Crdnod íz A 4i À — A # EAA Opp dhwentor 


模块 名 称 


模块 及 模块 说 明 


LostFocus( 事 件 ) 


失去 焦点 事件 


HideKeyboard( 方 法 ) 


Et 


BackgroundColor( 属 性 ) 


` eapoe.sssiareundcolər "Í, - Tenaor pactorownacaor | 


文本 框 的 背景 颜色 


Enabled( 属 性 ) 


Ca "1 - roasort erana | 


文本 框 的 可 用 性 


FontSize( 属 性 ) 


T odee rensie Í) - toneom ronse | 


文本 框 的 字体 大 小 


MoultiLine( 属 性 ) 


toeoa moune of ^ TextBox1.MultiLine 


文本 框 是 否 支持 多 行 输入 


NumbersOnly( 属 性 ) 


文本 框 是 否 只 允许 输入 数字 


Hint( 属 性 ) 


文本 框 的 提示 信息 


Text( 属 性 ) 


Presson Ton -oaoono | 


文本 框 的 显示 文字 


TextColor( 属 性 ) 


Peto encuer C- oreor Torcor | 


文本 框 内 文字 的 颜色 
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续 表 
模块 名 称 模块 及 模块 说 明 
set to (' Ë Y 
Visible( 属 性 ) TextBox1.Visible J TextBox1.Visible 
文本 框 的 可 见 性 


Height( 属 性 ) 


set to W" 
TextBox1.Height ) ”TextBox1.Height 


文本 框 的 高 度 


E TextBox1.Width e TextBox1.Width 
e ox1. 7 H 
Width Ji HE) NUES ^ TextBoxt Width. | 
文本 框 的 宽度 
u component BOLT 
TextBox1 C3: ffi ) TextBox 


文本 框 的 一 个 实例 


10. TinyDB( 微 型 数据 库 ) 
TinyDB 是 一 个 微型 数据 库 ,提供 基于 标签 (关键 字 ) 的 数据 的 存储 和 读 取 功能 。 


模块 名 称 


Wiz B.10 TinyDB 控件 说 明 
模块 及 模块 说 明 


StoreValue( 方 法 ) 


call tag [^ 数据 存储 ,tag 是 标签 ， 
valueToStore 是 要 存储 的 数 


TinyDB1.StoreValue sq 
据 , 可 以 是 字符 串 或 列表 


GetValue( 方 法 ) 


call tag [" 数据 读 取 , 根 据 标签 tag 获取 
^ TinyDB1.GetValue ] 数据 


TinyDB1( 实 例 ) 


4 emen omi | 微型 数据 库 的 一 个 实例 


B2 Meda( t) vr 


媒体 控件 共 6 个 ,包括 Camcorder, Camera, ImagePicker, Player, Sound 和 
VideoPlayer, 各 个 控件 的 事件 .属性 和 方法 如 附 表 B. 11 一 附 表 B. 16 所 示 。 


1. Camcorder( 录 像 机 ) 


Camcorder 主要 功 


能 是 利用 手机 的 摄像 头 实现 视频 的 录制 。 
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附 表 B. 11 Camcorder 控件 说 明 
模块 名 FR 模块 及 模块 说 明 
when Camcorder1.AfterRecording clip D name clip | 录像 结束 后 触发 的 
AfterRecording( 事 件 ) "do na 事件 , clip 代表 视频 
的 存储 路 径 
启动 手机 摄像 头 的 
RecordVideo( 方 法 ) Bl Camcorder1.RecordVideo | u 制 功能 


Camcorder 1( 实 例 ) 


2. Camera( 相 机 ) 


component 
z Camcorder1 


Camera 主要 是 实现 手机 的 拍照 功能 。 
附 表 B. 12 Camera 控件 说 明 


录像 控件 的 一 个 实例 


模块 名 称 模块 及 模块 说 明 
when Camera1.AfterPicture image " name | 
i " Image 拍照 后 事件 ,image 
AfterPicture( 事 件 ) do ei 是 相片 的 存储 路 径 
TakePicture( 方 法 ) cal Comerad TakePicture 相机 拍照 
Cameral( 实 例 ) C eemponet erqi 相机 的 一 个 实例 


3. ImagePicker( 选 图 工具 ) 


ImagePicker 的 主要 功能 是 从 手机 相册 的 图 片 库 中 选取 图 片 。 


附 表 B. 13 ImagePicker 控件 说 明 
模块 名 称 模块 及 模块 说 明 
when  ImagePickert.AfterPicking 
AfterPicking GE ff) do E 选 图 后 事件 
when ImagePicker1.BeforePicking 
BeforePicking( 事 件 ) 选 图 前 事件 


E 
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续 表 
模块 名 称 模块 及 模块 说 明 
GotFocus( 事 件 ) 获取 焦点 事件 
LostFocus( 事 件 ) 失去 焦点 事件 


Open( 方 法 ) BRE TERIS T JUR REIR 


^ ImagePicker1.Backg dCol 
BackgroundColor( 属 性 ) ey ImagePicker roun! or 


选 图 工具 的 背景 颜色 


M Enabled 
Enabled Jš #E) ns TTE _ImagePicker1.Enable 


选 图 工具 是 否 可 用 


^ ImagePickert segna | 
Height UR PE) BE ImagePicker1.Height 


选 图 工具 的 高 度 


^ ImagaPiekertimaqe | 


选 图 工具 的 背景 图 片 


Testi P aseeiserutea ' Ü < magepiesori Toa 


选 图 工具 的 显示 文字 


选 图 工具 的 文字 颜色 


^ l Picker1.Visible 
Visible( 属 性 ) E, ,ImagePlekert Vistble | E E 


选 图 工具 的 可 见 性 


^ imagePiekert wie | 
Wis ub P aeternam. ` Ü inagepetert wt 


选 图 工具 的 宽度 
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续 表 
BRER 模块 及 模块 说 明 
Selection( 属 性 ) e E 
所 选取 图 片 的 路 径 
& component 
ImagePickerl (3 ffi] ) ImagePicker1 
选 图 工具 的 一 个 实例 


4. Player( 音 频 播放 器 ) 


Player 用 来 播放 音频 文件 ,一 般 用 于 播放 时 间 较 长 的 音频 文件 ,如 音乐 .录音 等 。 
附 表 B.14 Player 控件 说 明 
模块 名 称 模块 及 模块 说 明 


when Player1.Completed 
Completed( 事 件 ) do 播放 完毕 事件 


Se 


Pause( 方 法 ) a Player1.Pause 暂停 播放 


Start( 方 法 ) layer1.Start 开始 播放 


Up 
Stop CJrik) e Playert.Stop 停止 播放 


使 手机 振动 ,milliseconds 是 振 
Vibrate( 方 法 ) pareri Vibre miliseconds (^ zip as 
Volume( 属 性 ) se t 设置 播放 的 音量 


Player1.Volume E J 


IsPlaying( 属 性 ) UG BIavertilsPlavin 是 否 正在 播放 
set ; to P Ë 
Source( 属 性 ) Eblertsouree i) Player1.Source 


播放 的 文件 


WR mew I 


续 表 
模块 名 称 模块 及 模块 说 明 
set tof Ë d 
IsLooping( 属 性 ) Player1.IsLooping J ^. Playert.IsLoopin 
是 否 循环 播放 


& component 
Player 3 ffi] ) Player 


音频 播放 器 的 一 个 实例 


5. Sound( 音 效 播放 器 ) 
Sound 一 般 可 用 来 播放 较 短 的 音频 文件 或 者 控制 手机 的 振动 。 
附 表 B. 15 Sound 控件 说 明 
”模块 名 称 | 模块 有 模块 说 有 í 


Pause( 方 法 ) a 暂停 播放 


Play( 方 法 ) e Sound1.Play 开始 播放 


Resume( 方 法 ) clsound1 Rosume 暂停 播放 后 继续 播放 


Stop( 方 法 ) °! Sound1.Stop J 停止 播放 


Vibrate( 方 法 ) eal undi Vibrate "S C EE Propone Tus 


set 


T 
MinimumJnterval( 属 性 ) Monet Minimum ierra MN ^ Seund1.Minimumlnterval | 
播放 最 短 时 间 间 隔 


cm Jw 
Source (JR FE) ound1.Source Sound1.Source 
播放 的 音效 源 


component 
Soundl( 实 例 ) Sound1 


音效 播放 器 的 一 个 实例 
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6. VideoPlayer( 视 频 播放 器 ) 
VideoPlayer 主要 用 于 播放 视频 文件 ,提供 基础 的 播放 控制 功能 ,包括 播放 、 和 暂停 、 调 


整 播放 位 置 等 。 
附 表 B. 16  VideoPlayer 控件 说 明 

模块 名 称 模块 及 模块 说 明 
— 
GetDuration( 方 法 ) 二 视频 长 度 
Pause( 方 法 ) 区 暂停 播放 
SeekTo( 方 法 ) Eora A 调整 播放 位 置 到 所 指定 时 间 处 
Start( 方 法 ) E ViqeoPlayert- start | 开始 播放 
Source IR AE) REEL 播放 文件 的 路 径 


FullScreen( 属 性 ) 


视频 播放 器 是 否 全 屏 
Height( 属 性 ) = vesctayrt ig" ^ MideoPlayer1.Height 
视频 播放 器 的 高 度 
Visible( 属 性 ) P vscPianri vaio" ^ VideoPlayert.Visible 
视频 播放 器 是 否 可 见 
Width( 属 性 ) = vectra," ^ NideoPlayer1.Width 
视频 播放 器 的 宽度 
& component 
VideoPlayerl( 实 例 ) im 


视频 播放 器 的 一 个 实例 


maf = = = z 
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B3 Arimdion(s% E f£ PE 


动画 控件 共 两 个 ,包括 Ball 和 ImageSprite, 各 个 控件 的 事件 .属性 和 方法 如 附 


表 B. 17 和 附 表 B. 18 所 示 。 
1. Ball( 球 体 ) 


Ball 是 球形 状 的 精灵 ,可 根据 属性 进行 移动 ,可 对 其 进行 触摸 和 拖 电 操作 ,也 可 以 与 
其 他 的 精灵 (图 像 精 灵 或 其 他 球 ) 及 画布 边缘 进行 交互 。 


模块 名 称 


附 表 B.17 Ball 控件 说 明 


模块 及 模块 说 明 


CollidedWith( 事 件 ) 


when Ball1.CollidedWith other (^ 
do 


碰撞 事件 ,球体 与 其 他 精灵 发 
生 碰撞 的 事件 


Dragged( 事 件 ) 


when Ball1.Dragged 


do 


拖 忠 事件 , 当 手 指 在 画布 上 拖 
忠 球 体 时 触发 本 事件 。 

startX startY: 表示 拖 电 事件 
开始 时 XY 坐标 值 ; 
prevX、prevY: 表示 上 一 个 拖 
忠 事 件 产生 时 的 XY 坐标 值 ; 
currentX、currentY: 表示 产生 
该 事件 时 的 XY. 坐标 轴 数 值 


M^ BalhFung x 滑动 事件 ,只 有 手指 在 画布 上 
y 快速 滑动 时 触发 本 事件 。 
x.y: 滑动 事件 初始 坐标 ; 
EROS speed; 滑动 事件 的 速度 (单位 
Flung( 事 件 ) 为 像素 /毫秒 ) ; 
ERES heading: 滑动 事件 的 角度 (0 一 
yvel 360); 
do xvel、yvel: 速度 在 X 轴 和 Y i 
的 分 量 
when Ball1.EdgeReached edge (7 触 壁 事件 , 当 球 触 碰 西 布 边 缘 
EdgeReached( 事 件 ) do 时 触发 本 事 从 ;并 返回 所 到 这 


— 


边缘 的 位 置信 息 , 其 中 edge 值 
是 返回 的 边缘 位 置信 息 
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模块 名 称 


续 表 


模块 及 模块 说 明 


NoLonger- 
CollidingWith( 事 件 ) 


不 再 碰撞 事件 , 当 球 体 与 其 他 
精灵 从 碰撞 状态 分 离 时 触发 
本 事件 


Touched( 事 件 ) 


触摸 事件 , 当 用 户 对 球 进行 触 
摸 时 触发 本 事件 。 
zy: MEAW XY fete fü 


TouchDown( 事 件 ) 


按 下 事件 , 当 用 户 对 球 进行 按 
下 操作 时 触发 本 事件 。 

zy: 手指 按 下 时 触摸 点 的 X、 
Y fi ^b fH 


TouchUp( 事 件 ) 


抬 起 事件 , 当 用 户 对 球 进行 按 
下 操作 后 抬 起 时 触发 本 事件 。 
zy: 手指 抬 起 时 触摸 点 的 X. 
Y 轴 坐 标 值 


Bounce( 方 法 ) 


球体 反弹 ,一 般 在 球体 与 精灵 
碰撞 后 使 用 


CollidingWith( 方 法 ) 


返回 球体 是 否 与 指定 精灵 
(other) 发 生 碰撞 


MoveIntoBounds( 方 法 ) 


若 球 移动 到 画布 边界 外 ,可 调 
用 本 方法 将 其 拉 回 界 内 


MoveTo( 方 法 ) 


把 球体 移动 到 指定 的 位 置 
(zyy) 


PointInDirection( 方 法 ) 


将 球 旋转 指向 坐标 Cz,y) 


PointTowards( 方 法 ) 


Horam] 


让 球 向 目标 精灵 (target) 移 动 


naQ 控件 简介 


185 


PI 
模块 名 称 模块 及 模块 说 明 
Enabled( 属 性 ) T aera "Ü|, Ball1.Enabled 
球体 的 可 用 性 
Heading( 属 性 ) ”Ball1.Heading 
球体 的 方向 


Interval( 属 性 ) 


P ban menat “Í — one | 


球体 的 移动 频率 ,单位 为 毫秒 


pompanicalor “| ”Ball1.PaintColor 


PaintColor( 属 性 ) 
球体 的 颜色 
Radius( 属 性 ) "suras "Ü ^, Ball. Radius 
球体 的 半径 
Visible( 属 性 ) KUU + Bamvisipe | 
球体 的 可 见 性 
Speed( 属 性 ) sos "Ü ^ Bali speed | 
球体 的 移动 速度 ,单位 为 像素 
球体 位 置 的 X 坐标 
Y( 属 性 ) “aay "Ü ^ Ball. Y 
球体 位 置 的 Y 坐标 
球体 位 置 的 Z 坐标 
componert 
Balll (实例 ) Ball1 


球体 的 一 个 实例 
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2. ImageSprite( 图 像 精 灵 ) 
ImageSprite 是 一 种 可 在 画布 中 自由 移动 的 图 像 , 并 可 与 球体 (Ball) .其 他 图 像 精灵 
和 画布 边缘 产生 碰撞 效果 ,因此 图 像 精 灵 经 常用 于 开发 游戏 。 
附 表 B. 18 ImageSprite 控件 说 明 
模块 名 称 模块 及 模块 说 明 


CollidedWith( 事 
件 ) 


碰撞 事件 ,图 像 精灵 与 其 他 精 
灵 发 生 碰撞 的 事件 


拖 忠 事件 , 当 手 指 在 画布 上 拖 
忠 图 像 精灵 时 触发 本 事件 。 
startX、startY: 表示 拖 电 事件 
开始 时 XY 坐标 值 ; 
Dragged( 事 件 ) prevX、prevY: 表示 上 一 个 拖 
忠 事 件 产生 时 的 XY 坐标 值 ; 
currentX、currentY: 表示 产生 
该 事件 时 的 X.Y 坐标 轴 数 值 


滑动 事件 ,只 有 手指 在 画布 上 
快速 滑动 时 触发 本 事件 。 
xy: 滑动 事件 初始 坐标 ; 
speed: 滑动 事件 的 速度 (单位 


Flung( 事 件 ) 为 像素 /毫秒 ); 
heading: 滑动 事件 的 角度 (0 一 
360); 
xvel、yvel: IJE X HH Y d 
的 分 量 
s s - 和 触 壁 事件 , 2H i f 22 f pi i] 
EdgeReached 布 边缘 时 触发 本 事件 ,并 返回 
(事件 ) 所 到 达 边 缘 的 位 置信 息 ' 其 中 
edge 值 是 返回 的 边缘 位 置 
信息 
NoLonger 不 再 碰撞 事件 , 当 图 片 精灵 与 
CollidingWith 其 他 精灵 从 碰撞 状态 分 离 时 
(事件 ) 触发 本 事件 


触摸 事件 , 当 用 户 对 图 片 精灵 
Touched( 事 件 ) 进行 触摸 时 触发 本 事件 。 
X.y: 触 控 点 的 轴 坐 标 值 


naQ je fF fW jr 


# k 
模块 名 称 模块 及 模块 说 明 
按 下 事件 , 当 用 户 对 图 片 精 
灵 进 行 按 下 操作 时 触发 本 
TouchDown (事件 ) 事件 。 


xy: 手指 按 下 时 触摸 点 的 
X 轴 坐标 值 


TouchUp( 事 件 ) 


抬 起 事件 , 当 用 户 对 图 片 精 
灵 进 行 按 下 操作 后 抬 起 时 触 
发 本 事件 。 

xy: 手指 抬 起 时 触摸 点 的 
XY 轴 坐 标 值 


图 片 精灵 反弹 ,一 般 在 图 片 


Bosne (ER 精灵 与 精灵 碰 擅 后 使 用 
CollidingWith ( Jr 返回 图 片 精灵 是 否 与 指定 精 
法 ) 灵 (other) 发 生 碰 撞 

若 图 片 精灵 移动 到 画布 边界 


MovelIntoBounds 
(方法 ) 


外 ,可 调用 本 方法 将 其 拉 回 
界 内 


MoveTo( 方 法 ) 把 图 片 精灵 移动 到 指定 的 位 
E.y) 

PointInDirection 将 图 片 精灵 旋转 指向 坐标 

(方法 ) (x,y) 


pum 
一 
= 


Point Towards ( Jf CE a 让 图 片 精灵 向 指定 的 目标 精 
法 ) R (target) $ z) 


7. Imagespritet. Enabled 
— Penes nesis ©) imagsspntet tens | 


图 片 精灵 的 可 用 性 


& f 


图 片 精灵 的 方向 


€— Piensa" - inssesəntetinana 


图 片 精灵 的 移动 频率 ,单位 为 毫秒 
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模块 名 称 模块 及 模块 说 明 


us" 'Sprite1.Pictu. ef l Sprite1.Picti | 
magesSprite1. re D ite1. 
Picture( 属 性 ) JERR J mageSprite ure 


图 片 精灵 的 背景 图 片 


set to r 
ImageSprite1.Rotates J ^. ImageSprite1.Rotates 


图 片 精灵 是 否 已 经 旋转 到 Heading 指定 的 方向 。 在 用 户 更 改 Heading 后 ,返回 
true 表示 已 经 旋转 完毕 ,返回 false 表示 还 没有 完成 旋转 


Rotates( 属 性 ) 


set 


to [" Ë 
Visible( 属 性 ) —  ImageSprite1-Visible ^ 'j ”ImageSprltel.Visible 
图 片 精 灵 的 可 见 性 


set 


Speed JR HE) megespriet speed °° Í, ^ ImageSpritet.Speed 
图 片 精灵 移动 的 速度 ,单位 为 像素 


set 


to r & 
Height 属性 ) ImageSprite1.Height J ImageSprite1.Height 
图 片 精灵 的 高 度 


set 


Width( 属 性 ) ImageSprite1.Width , ^ ImageSprite1. Width 
图 片 精灵 的 宽度 


set 


X( 属 性 ) ImageSpritet.x ^ Le ImageSprite1.X 
图 片 精灵 的 X 坐标 


set 


1 EET. Sprite. Y 
Ë geSprite1. 

Y( 属 性 ) mageSp mage e 

图 片 精灵 的 Y 坐标 


set to” 
ImageSprite1.Z ^ JmageSprite1.2 
Z( 属 性 ) age puta: J ^. ImageSprite 


图 片 精灵 的 Z 坐标 


š component 
ImageSprite1 ( 实 rco ImageSprite1 


"m 图 片 精灵 控件 的 一 个 实例 
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na name 


B4 Socia( 社 交 ) 控 件 


社交 控件 共 6 个 ,包括 ContactPicker, EmailPicker、 PhoneCall, PhoneNumberPicker、 
Texting 和 Twitter, 各 个 控件 的 事件 .属性 和 方法 如 附 表 B. 19 一 附 表 B. 24 所 示 。 


1. ContactPicker( 选 取 联 系 人 ) 
ContactPicker 的 功能 是 让 用 户 从 手机 的 通讯 录 中 获得 联系 人 信息 ,这 些 1 


系 人 的 姓名 、 头 像 和 电子 邮件 地 址 。 


模块 名 称 


附 表 B. 19  ContactPicker 控件 说 明 
模块 及 模块 说 明 


选择 后 事件 ,在 用 户 选择 目标 
联系 人 后 产生 


whel 
A 


AfterPicking GE fF) 


n  ContactPickert.AfterPicking 
do 
Anaa 


选择 前 事件 ,在 用 户 打开 通讯 
录 , 但 是 尚未 选择 目标 联系 人 


时 产生 


BeforePicking( 事 件 ) 


wher 
A 


when  ContactPicker1.BeforePicking 
do 
MÀ 


获取 焦点 事件 


GotFocus( 事 件 ) 


n ContactPicker1.GotFocus 
do 
ss 


when 


LostFocus( 事 件 ) 


2 ContactPicker1.LostFocus 


P 


打开 联系 人 列表 供 选择 


call 
ContactPicker1.Open 


^_ContactPicker1.BackgroundColor 


Open( 方 法 ) 
Set to 

BackgroundColor ( 属 ContactPicker1.BackgroundColor J 

FE) 
背景 颜色 
ContactName( 属 性 》 ^ ContactPicker1.ContactName | 
联系 人 姓名 
”ContactPicker1.EmailAddress | 
联系 人 地 址 


EmailAddress( 属 性 ) 
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模块 名 称 模块 及 模块 说 明 


i ^_ContactPicker1.Picture 
Picture( 属 性 ) 


联系 人 头像 


set to r , 
ContactPicker1.Enabled j ^. ContactPicker1.Enabled 


控件 的 可 用 性 


°° ContactPickeri.I 可 二 tactPicker1.Imag 
Image( 属 性 ) ontactPicker1.Image J ontactPicker1.Image 


控件 的 背景 图 片 


Enabled( 属 性 ) 


set 


N 
ctPicker1.Text ^ ; 
Text( 属 性 ) ContactPicker1.Te; ContactPicker1.Text 
控件 显示 的 文本 


P 


控件 的 文本 颜色 


set t 
ContactPicker1.TextColor Ww ContactPicker1.TextColor | 


TextColor( 属 性 ) 


Set 


op 
Visible JA PE) ContactPicker1.Visible ) ^_ContactPicker1.Visible 
控件 的 可 见 性 


Set 


EP; 
Height( 属 性 ) ContactPicker1.Height J ContactPicker1.Height 
控件 的 高 度 


Set 


Width( 属 性 ) 7" contasipieker warn "° Ó ^ ContactPickeri. Width 
控件 的 宽度 


b SAC ntactPicker1 
ContactPickerl (实例 ) — 


选取 联系 人 的 一 个 实例 


2. EmailPicker( 邮 件 地 址 工具 ) 


EmailPicker 在 用 户 输入 联系 人 的 电子 邮件 地 址 时 ,提供 自动 完成 邮件 地 址 输入 的 
功能 。 


模块 名 称 


naQ 控件 简介 
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附 表 B.20  EmailPicker 控件 说 明 
模块 及 模块 说 明 


GotFocus( 事 件 ) 


获取 焦点 事件 


LostFocus( 事 件 ) 


失去 焦点 事件 


BackgroundColor( 属 性 ) 


控件 的 背景 颜色 


Enabled( 属 性 ) 


控件 的 可 用 性 


FontSize( 属 性 ) 


控件 的 字体 大 小 


Hint( 属 性 ) 


控件 的 提示 内 容 


Text( 属 性 ) 


mepietert To “| ”EmailPicker1.Text 


控件 的 显示 文本 内 容 


TextColor( 属 性 ) 


控件 的 显示 文本 颜色 


Visible( 属 性 ) 


”EmailPicker1.Visible 


控件 的 可 见 性 


Height( 属 性 ) 


控件 的 高 度 
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模块 名 称 模块 及 模块 说 明 


Set t 
ilPi .Wi 
Width( 属 性 ) EmailPicker1.Width 


EmailPicker1.Width 


控件 的 宽度 


EmailPickerl( 实 例 ) mailPicker 


3. PhoneCall( 拨 号 ) 


邮件 地 址 工具 的 一 个 实例 


PhoneCall 是 一 个 非 可 视 化 控件 ,用 于 向 指定 的 电话 号 码 拨打 电话 。 


附 表 B.21 PhoneCall 控件 说 明 


模块 名 称 模块 及 模块 说 明 


MakePhoneCall( 方 法 ) °°! PhoneCall1.MakePhoneCall 


调用 手机 的 拨号 界面 ,拨打 
PhoneNumber 属性 中 的 电话 号 码 


set 


m. 
PhoneNumber Jš PE) PhoneCall1.PhoneNumber PhoneCall1.PhoneNumber 


拨号 的 电话 号 码 


& component Ph «ut 
PhoneCalll (实例 ) oneCa 


拨号 控件 前 


4. PhoneNumberPicker 3 BUE 83 ) 


-个 实例 


PhoneNumberPicker 可 以 获取 手机 通讯 录 中 的 联系 人 信息 ,这 些 信息 包括 联系 人 的 


姓名 、 头 像 . 电 子 邮 件 地 址 和 电话 号 码 。 


附 表 B.22  PhoneNumberPicker 控件 说 明 


模块 名 称 模块 及 模块 说 明 


m when  PhoneNumberPicker1.AfterPicking 
AfterPicking (3E 
do 
fto 


选择 后 事件 ,在 用 户 选 择 目标 
联系 人 后 产生 


when PhoneNumberPicker1.BeforePicking 


BeforePicking 3 
(事件 ) Š: 


选择 前 事件 ,在 用 户 打 开通 讯 


录 , 但 是 
时 产生 


尚未 选择 目标 联系 人 
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续 表 
模块 名 称 模块 及 模块 说 明 
When PhoneNumberPicker1.GotFocus 
GotFocus( 事 件 ) do 获取 焦点 事件 
when PhoneNumberPicker1.LostFocus 

LostFocus( 事 件 ) do E 失去 焦点 事件 
Open( 方 法 ) isl PhoneNumberPicker.Open J 打开 联系 人 列表 供 选择 
BackgroundColor ns PhoneNumberPicker1.BackgroundColor BC. PhoneNumberPicker1.BackgroundColor 
(属性 ) 

控件 的 背景 颜色 
ContactName ”PhoneNumberPicker1.ContactName 
(属性 ) - 

目标 联系 人 姓名 
EmailAddress ”PhoneNumberPicker1.EmalilAddress 
(属性 ) : : 

目标 联系 人 电子 邮件 地 址 

Picture( 属 性 ) ”PhoneNumberPicker1.Picture 

目标 联系 人 头像 
PhoneNumber ^ PhoneNumberPicker1.PhoneNumber 
(属性 ) 

目标 联系 人 电话 号 码 
* ph NumberPickerl1.Ei EET. i | 

Enabled JB tE) oneNum cker1. Enable: ) ^ PhoneNumberPicker1.Enabled 

控件 的 可 用 性 

"on N Picker1.1 E m NumberPicker1.! | 

Image( 属 性 ) oneNumberPicker1.Image oneNum icker1.Image 

控件 的 背景 图 片 

这 berPickeri.Text ° D ^ i | 
Text( 属 性 ) PhoneNumberPicker1. Text PhoneNumberPicker1.Text 
控件 的 显示 文本 信息 
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续 表 
模块 名 称 模块 及 模块 说 明 
set to y | 
TextColor( 属 性 ) PhoneNumberPicker1. TextColor J “_PhoneNumberPicker1.TextColor 
控件 的 文本 颜色 
set to [ E | 
Visible( 属 性 ) PhoneNumberPicker1.Visible J “_PhoneNumberPicker1.Visible 
控件 的 可 见 性 
set to 人 
Height( 属 性 ) PhoneNumberPicker1.Height J ”PhoneNumberPicker1.Height 
控件 的 高 度 
Set to P 
Width( 属 性 ) PhoneNumberPicker1.Width h PhoneNumberPicker1. Width 
1 
控件 的 宽度 
PhoneNumberPicker ev PhoneNumberPlckerl 
1( 实 例 ) 
选取 号 码 控件 的 一 个 实例 


5. Texting( 短 信息 ) 
Texting 是 非 可 视 化 控件 ,主要 用 来 发 送 和 接收 短信 息 。 


附 表 B. 23 Texting 控件 说 明 


模块 名 称 模块 及 模块 说 明 

when Texting1.MessageReceived number n 信息 接收 事件 ,在 接收 短信 
MessageReceived ( 事 messageText 后 产生 ,number 是 发 送 方 
ft) do lie 的 电话 号 码 , message Text 

是 短信 息 内 容 
SendMessage( 方 法 ) gal Texting1.SendMessage 发 送 短信 
" " set s to N 

GoogleVoiceEnabled Texting1.GoogleVoiceEnabled J “_Texting1.GoogleVoiceEnabled 
(属性 ) 


是 否 允 许 使 用 GoogleVoice 服务 
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续 表 
模块 名 称 模块 及 模块 说 明 
Message( 属 性 ) sns U N + Texingt Message | Message 
短信 的 内 容 
El to " Ë ' | 
PhoneNumber( 属 性 ) Texting1.PhoneNumber | ”Texting1.PhoneNumber 
发 短信 的 目标 电话 号 码 
set Em É 
Ree eicp buabled JE ^ Texting1.ReceivingEnabled 
(属性 ) 
是 否 允 许 接收 短信 
, component 
Texting1( 实 例 ) — Texting1 


6. Twitter( 推 特 ) 


短信 的 一 个 实例 


Twitter 是 一 个 社交 网 络 和 一 个 微 博客 服务 ,可 以 让 用 户 更 新 不 超过 140 个 字符 的 
消息 ,通过 该 模块 可 以 调用 Twitter 的 服务 。 


模块 名 称 


附 表 B.24 Twitter 控件 说 明 
模块 及 模块 说 明 


Direct MessageReceived 


(事件 ) 


when Twitter1.DirectMessagesReceived messages C 通 过 RequestDirect- 
do Messages 方法 ,获取 到 


所 查询 的 信息 的 事件 


FollowersReceived 


(事件 ) 


when Twitter1.FollowersReceived rfollowers2 r 通过 RequestFollowers 
do 方法 获取 到 所 查询 的 
在 线 好 友 名 单 的 事件 


FriendTimelineReceived 


(事件 ) 


when Twitter1.FriendTimelineReceived timeline (” 通 过 RequestFriend- 


us Time 方 法 获取 到 所 查 
询 的 信息 所 产生 的 事件 


— J 


IsAuthorized 3 fF) 


用 户 登 录 验 证 通过 或 
验证 该 用 户 已 存在 的 
事件 


when Twitter1.IsAuthorized 
do 


—————— 
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续 表 
模块 名 称 模块 及 模块 说 明 
登录 用 户 通 过 调用 
MentionsReceived( 事 件 ) RequestMentions 后 , 获 


取 结 果 时 产生 的 事件 


SearchSuccessful( 事 件 ) 


Twitter 中 搜索 成 功 
事件 


Authorize( 方 法 ) 


给 用 户 呈 现 一 个 


(user) 


RequestDirect Messages 


Tuitert autorize | Twiter 的 登录 页 面 
检测 用 户 输 入 的 用 户 
ChedkAuthorized( 方 法 ) 7 wttert.cnectAuthorizeg | 名 及 密码 信息 是 否 正确 
f 退出 已 登录 的 Twitter 
DeAuthorize( 方 法 ) (Twitert. Deauthorize | 应 用 程序 
DirectMessage( 方 法 ) i e ] "aa 发 送 消息 
Folow io puter oon °= e T 


(方法 ) 接收 最 新 的 消息 
RequestFollowers( 方 法 ) ca hes * 在 关注 我 的 用 
RequestFriendTimeline ER] 获取 关注 我 的 用 户 的 
(方法 ) 最 新 消息 
MEN 获取 有 关 其 他 人 提 及 
RequestMentions( 方 法 ) | 登录 用 户 的 最 新 消息 
列表 
SearchTwitter( 方 法 ) NW 在 Twitter 中 搜索 内 容 
uw MENENNÉE 0 
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续 表 
模块 名 称 模块 及 模块 说 明 
StopFollowing (方法 ) Ka Twitter1.StopFollowing EL vicies CE 


set to [ 
Twittert.ConsumerKey j^ TWitter1.ConsumerKe 


Twitter 用 来 确认 用 户 身 份 的 字符 串 ,该 字符 串 可 以 从 twitter. com/oauth | 
clients/new 中 获取 


ConsumerKey( 属 性 ) 


set to 
ConsumerSecret( 属 性 ) Twittert.ConsumerSecret ^ Twitterl.ConsumerSecret 


Twitter 用 来 确认 用 户 身 份 的 字符 串 


DirectMessages( 属 性 ) Twitter1.DirectMessages 


发 送 的 消息 文本 


Followers (JÑ tE) ”Twitter1.Followers 


关注 用 户 中 在 线 用 户 的 列表 


FriendTimeline( 属 性 ) Twitter1.FriendTimeline 


关注 用 户 的 最 新 消息 


Mentions( 属 性 ) ^ Twitter1.Mentions 


提 及 登录 者 的 最 新 消息 列表 


SearchResults( 属 性 ) ”Twitter1.SearchResults 


SearchTwitter 方法 的 搜索 结果 


Username( 属 性 ) | 


获取 登录 用 户 的 用 户 名 


hia component 
Twitterl( 实 例 ) Twitter1 


Twitter 的 一 个 实例 
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B5 Sensors(T# R 8 JR IR 
感应 器 控件 共 三 个 ,包括 AccelerometerSensor, LocationSensor 和 OrientationSensor, 各 
个 控件 的 事件 .属性 和 方法 如 附 表 B. 25 一 附 表 B. 27 所 示 。 
1. AccelerometerSensor( 加 速 传感器 ) 


AccelerometerSensor 的 主要 功能 是 获取 手机 加 速度 感应 器 的 状态 ,并 侦 测 设备 三 维 
空间 的 晃动 情况 。 
附 表 B. 25 AccelerometerSensor 控件 说 明 
模块 名 称 模块 及 模块 说 明 


when AccelerometerSensor1.AccelerationChanged xAccel (^ 


yAccel 
AccelerationChanged 加 速度 感应 器 的 
zAccel 


(事件 ) 值 改 变 事 件 
8 


———————————— 


when AccelerometerSensor1.Shaking 
Shaking( 事 件 ) do 手机 晃动 事件 


——M—M———————— 


Available Jf PE) ^ AccelerometerSensor1.Available 


手机 是 否 存 在 方向 加 速度 传感器 


set to r 
Enabled fi PE) AccelerometerSensor1.Enabled AccelerometerSensor1.Enabled 


控件 的 可 用 性 
~ set to r | 
Minimumlnterval AccelerometerSensor1.Minimumlnterval ) ^ AecelerometerSensort.Minimuminterval 
(属性 ) 
手机 振动 的 最 小 时 间 间 隔 
XAccel( 属 性 ) —_AccelerometerSensor1.XAccel 
加 速度 传感器 X 轴 的 变化 量 
YAccel( 属 性 ) —_AccelerometerSensor1.YAccel 


加 速度 传感器 Y 轴 的 变化 量 


模块 名 称 


ma name 
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模块 及 模块 说 明 


续 表 


ZAccel( 属 性 ) 


”AccelerometerSensor1.ZAccel | 


加 速度 传感器 Z 轴 的 变化 量 


AccelerometerSensorl 


(实例 ) 


component 
7] AccelerometerSensor1 


加 速度 传感器 的 一 个 实例 


2. LocationSensor( 位 置 传 感 器 ) 


LocationSensor 的 主要 功能 是 使 用 设备 的 GPS 或 者 其 他 定位 方法 (移动 基站 或 无 线 
网 络 ) 获 取 手 机 的 当前 位 置信 息 。 


模块 名 称 


附 表 B. 26  LocationSensor 控件 说 明 
模块 及 模块 说 明 


LocationChanged( 事 件 ) 


when LocationSensor1.LocationChanged latitude P 
longitude n 
altitude 


位 置 改 变 事 件 


when LocationSensor1.StatusChanged provider (^ 


设备 的 服务 提 


StatusChanged( 事 件 ) 于 供 者 状态 改变 
NN 事件 
LatitudeFromAddress cal cuis ana r 获取 指定 地 址 
(方法 ) ^ ^  LocationSensor1.LatitudeFromAddress 的 纬度 
LongitudeFromAddress call BONGNENS r 获取 指定 地 址 
(方法 ) ^ ^ LocationSensori.LongitudeFromAddress 的 经 度 
手机 所 在 位 置 

Accuracy( 属 性 ) ^_LocationSensor1. Accuracy | 的 精度 等 级 

š 手机 所 在 位 置 
Altitude( 属 性 ) ^ LocationSensor1.Altitude | 的 海拔 高 度 
AvailableProviders 手机 可 用 的 服 
(属性 ) ^ LocationSensor1.AvailableProviders | 务 提供 者 清单 
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续 表 
模块 名 称 模块 及 模块 说 明 
CurrentAddress( 属 性 ) ^ LocationSensor1.CurrentAddress | 手机 的 当前 位 置 
手机 是 否 可 以 
HasAccuracy( 属 性 ) ^ LocationSensort.HasAccuracy | 回 传 精度 
f 手机 是 否 可 以 
HasAltitude( 属 性 ) 上 回 传 海拔 高 度 
HasLongitudeLatitude 手机 是 否 可 以 
(属性 ) | 回 传经 度 和 纬度 
f 手机 所 在 位 置 
Latitude( 属 性 ) —_LocationSensor1.Latitude 的 纬度 
f 手机 所 在 位 置 
Longitude Jf f) A Losetonsensort.Longiuse | 的 经 度 


DistanceInterval( 属 性 ) 


Set 


LocationSensor1.Distancelnterval S " ”LocationSensor1.Distancelnterval 
位 置 更 新 的 最 小 变化 距离 


Enabled( 属 性 ) 


set 


to 
LocationSensor1.Enabled L: ”LocationSensor1.Enabled 


位 置 传感器 是 否 可 用 


ProviderLocked( 属 性 ) 


set to y 
LocationSensor1.ProviderLocked ”LocationSensor1.ProviderLocked 
Android 设备 锁定 现在 的 服务 提供 者 


ProviderName( 属 性 ) 


set t 
LocationSensor1.ProviderName JN ^ LocationSensor1.ProviderName | 


位 置 服务 的 提供 者 名 称 


TimelInterval( 属 性 ) 


set to 
LocationSensor1.Timelnterval [^ LocationSensor1.Timelnterval | 


位 置 更 新 的 最 小 时 间 间 隔 


LocationSensorl( 实 例 ) 


component 
"J LocationSensor1 | 


位 置 传感器 的 一 个 实例 
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3。OrientationSensor( 位 置 传感器 ) 


OrientationSensor 用 来 测定 手机 的 方向 变化 。 
附 表 B. 27  OrientationSensor 控件 说 明 
模块 名 称 模块 及 模块 说 明 


when OrlentatlonSensor1.OrlentationChanged azimuth 站 


do gz 
Angle REO ^ OrlentationSensort.Angle 手机 的 倾斜 角 大 小 
nile He EO ^ Orientationsensort.Available — CONUM 
Azimuth( 属 性 ) en 手机 的 方位 角 
Magnitude( 属 性 ) ^ Orlentationsensort.Magnitude kd dn pius 2 el n 
Pitch MH ^ Orlentationsensort.Pitch 手机 的 翻转 角 
Roll( 属 性 ) ^ Orlentationsensor!.Roll 手机 的 转动 角 


pitch 


ra) 方向 变化 事件 


OrientationChanged 


(事件 ) 


set to 
Enabled( 属 性 ) OrientationSensor1. Enabled e ^ OrientationSensor1.Enabled 
方向 感应 器 是 否 可 用 
OrientationSensorl A pemponent GrlentationSensori | 
(实例 ) 


方向 传感器 的 一 个 实例 


B6 Screen Arrangement( 屏 幕布 局 ) 控 件 


屏幕 布局 控件 共 三 个 ,包括 HorizontalArrangement、TableArrangement 和 
VerticalArrangement ,各 个 控件 的 事件 .属性 和 方法 如 附 表 B. 28 一 附 表 B. 30 所 示 。 
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1. HorizontalArrangement zk 3E # E) 


HorizontalArrangement 可 以 将 多 个 控件 横向 排列 于 其 中 ,但 每 列 仅 包含 一 个 界面 
控件 。 


附 表 B.28 HorizontalArrangement 控件 说 明 


模块 名 称 模块 及 模块 说 明 


Š set to 
AlignHorizontal HorizontalArrangement1.AlignHorizontal [ ^ HorizontalArrangement1.AlignHorizontal | 


(属性 ) 


控件 在 布局 中 水 平方 向 的 排 布 方式 ,可 以 左 对 齐 、 右 对 齐 、 居 中 或 自动 


í š set to 
AlignVertical HorizontalArrangement1.AlignVertical [5 HorizontalArrangement1.AlignVertical | 
(属性 ) 


控件 在 布局 中 竖 直 方向 的 排列 方式 ,可 以 上 对 齐 、 下 对 齐 、 居 中 或 自动 


set to r 
Height( 属 性 ) HorizontalArrangement1.Height HorizontalArrangement1.Height 


水 平 布局 的 高 度 


FS to r 
W: IzontalA nt1.Visibl | .Visibl 
Visible( 属 性 ) HorizontalArrangemei sible J ^ _HorizontalArrangement1. Visible 


水 平 布局 是 否 可 见 


set to n 
t .Width 了 g 5 
Width( 属 性 ) HorlzontalArrangement1.Wi J) ^. HerizontalArrangement1.Width 


水 平 布局 的 宽度 


š component 
HorizontalArran- z HorlzontalArrangement1 


gement C Sc ff] ) 
水 平 布局 的 一 个 实例 


2. VerticalArrangement (Œ Ei f J) ) 


VerticalArrangement 可 以 竖 直 排 列 多 个 控件 ,但 每 行 仅 包含 一 个 界面 控件 。 


附 表 B.29  VerticalArrangement 控件 说 明 


模块 名 称 模块 及 模块 说 明 


. : set to 
AlignHorizontal VerticalArrangement1.AlignHorizontal [ ^ VerticalArrangement1.AlignHorizontal | 
(属性 ) 


控件 在 布局 中 水 平方 向 的 排 布 方式 ,可 以 左 对 齐 、 右 对 齐 、 居 中 或 自动 
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续 表 
模块 名 称 模块 及 模块 说 明 
set Y , to r | 
AlignVertical VerticalArrangement1.AlignVertical `) ^_VerticalArrangement1.AlignVertical 
(属性 ) 


控件 在 布局 中 竖 直 方向 的 排列 方式 ,可 以 上 对 齐 、 下 对 齐 、 居 中 或 自动 


to 
VerticalArrangement1.Height G’ VerticalArrangement1.Height | 


Height Jš HE) 
垂直 布局 的 高 度 
Set to P Ë 
Visible( 属 性 ) VerticalArrangement1.Visible ) —_VerticalArrangement1.Visible 
垂直 布局 是 否 可 见 


set to r 
Width( 属 性 ) VerticalArrangement1.Width VerticalArrangement1.Width 
垂直 布局 的 宽度 


E component 
VerticalArrang- p us VerticalArrangement1 


ementl C3 ffi] ) 
垂直 布局 的 一 个 实例 


3. TableArrangement( 表 格 布 局 ) 


TableArrangement 可 以 划分 多 行 多 列 ,每 个 网 格 中 可 以 放 一 个 或 者 多 个 界面 控件 。 
附 表 B.30  TableArrangement 控件 说 明 
模块 名 称 模块 及 模块 说 明 


op 


E | 
Height( 属 性 ) TableArrangement1.Height ) ^. TableArrangementt.Height 


表格 布局 的 高 度 


Set to P | 
Visible( 属 性 ) TableArrangement1.Visible TableArrangement1.Visible 


表格 布局 是 否 可 见 


to Ü” 


set 
Width( 属 性 ) TableArrangement1.Width J “_TableArrangement1.Width | 


表格 布局 的 宽度 


component 
"] TableArrangement1 


表格 布局 的 一 个 实例 


TableArrangement1( 实 例 ) 
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B7 LEGO MNDSTORVS( 乐 高 机 颖 人 ) 控 件 


乐高 NXT 智慧 型 机 器 人 控件 共 7 个 ,包括 NxtColorSensor, NxtDirectCommands、 


NxtDrive, NxtLightSensor, NxtSoundSensor, NxtTouchSensor 和 NxtUltrasonicSensor. 


各 个 控件 的 事件 .属性 和 方法 如 附 表 B. 31 一 附 表 B. 37 所 示 。 


1. NxtColorSensor( Nxt 颜色 感应 器 ) 


NxtColorSensor 模块 用 来 控制 乐高 NXT 机 器 人 上 的 颜色 感应 器 。 


附 表 B.31  NxtColorSensor 控件 说 明 


模块 名 称 模块 及 模块 说 明 
wh 
AboveRange 人 二 指定 的 范围 时 和 
(事件 ) 发 的 事件 
ee 
wh 
BelowRange vU centem tecwnenge | — oae i Dini 8 
(事件 ) 发 的 事件 


——————————AÀ 


ColorChanged when  NxtColorSensori.ColorChanged color l: 检测 到 颜色 发 生 改 变 时 触发 
(事件 ) ° 的 事件 
ES 
WithinRange T NxtColorSensor1.WithinRange > y 4 fE di us BU 36; EL P BJ fü 
(事件 ) š: 发 的 事件 
i 

— s 返回 颜色 感应 器 所 检测 到 的 
GetColor( 方 法 ) ^, EË) Nxtcolorsensori.GetColor 颜色 

GetLightLevel ==? 返回 光 值 强度 ( 介 于 0 — 1023 
(方法 ) ^ ^ NxtColorSensort.GetLightLevel 的 整数 ) 

AboveRange- 


EventEnabled 
(属性 ) 


set 
NxtColorSensor1.AboveRangeEventEnabled 


Em 
了 ^. NxtColorSensort.AboveRangeEventEnabled | 


当 光 值 大 于 TopOfRange 时 是 否 触 发 AboveRange 事 件 


BelowRange- 
EventEnabled 
(属性 ) 


to 
NxtColorSensor1.BelowRangeEventEnabled 


E 


N 


^ NxtColorSensor1.BelowRangeEventEnabled | 


当 光 值 低 于 BottemOfRange 时 是 否 触发 BelowRange 事件 
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续 表 
模块 名 称 模块 及 模块 说 明 
set to r 

BottomOfRange NxtColorSensor1.BottomOfRange ) ^ NxtColorSensort.BottomOfRange 
(属性 ) 

设置 触发 WithinRange、BelowRange、AboveRange 等 事件 的 最 小 值 
ColorChanged- set to | 

NxtColorSensor1.ColorChangedEventEnabled ) “_NxtColorSensor1.ColorChangedEventEnabled 

EventEnabled 
(属性 ) 当 检测 到 颜色 发 生变 化 时 , 设 定 是 否 触 发 ColorChanged 事件 

set to W | 
D ` NxtColorSensor1.DetectColor J “_NxtColorSensor1.DetectColor 

etectColor 

(属性 ) 


设 定 颜 色 感 应 器 是 检测 颜色 还 是 光 值 , 设 为 true 时 检测 颜色 变化 ,反之 检测 光 值 
变化 


GenerateColor 


(属性 ) 


set 


t 
NxtColorSensor1.GenerateColor š D ^ NxtColorSensor1.GenerateColor 
设 定 颜色 感应 器 是 否 发 光 


TopOfRange 
(属性 ) 


set ti 
NxtColorSensor1.TopOfRange E: NxtColorSensort.TopOfRange | 


设置 触发 WithinRange, BelowRange, AboveRange 等 事件 的 最 大 值 


WithinRange- 
EventEnabled 


(属性 ) 


set to 
NxtColorSensor1.WithinRangeEventEnabled “_NxtColorSensor1.WithinRangeEventEnabled | 


当 光 值 介 于 BottomOfRange 与 TopOfRange 之 间 时 ,是 否 触发 WithinRange 事件 


NxtColorSensor 
1( 实 例 ) 


component 
"| NxtColorSensor1 


颜色 感应 器 的 一 个 实例 


2. NxtDirectCommands( Nxt 通信 规范 ) 


NxtDirectCommands 定义 了 对 NXT 智慧 机 器 人 的 通信 命令 ,通过 该 命令 集 可 以 直 


接 对 机 器 人 进行 控制 。 
附 表 B.32 NxtDirectCommands 控件 说 明 
模块 名 称 模块 及 模块 说 明 
DeleteFile( 方 法 ) Eu fileName P 删除 机 器 人 上 的 


NxtDirectCommands1.DeleteFile Ë J 文件 


call source Ë 


将 文件 下 载 到 机 


DownloadFile( 方 法 ) NxtDirectCommands1.DownloadFile destination W 器 人 上 
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续 表 
模块 名 称 模块 及 模块 说 明 
获得 机 器 人 的 电 
c»-on| =: 
co | ME 
No | 
Name( 方 法 ) 运行 的 程序 名 称 
GetFirmwareVersion | 获得 机 器 人 固件 
(方法 ) 和 通信 协议 版 本 号 
n 器 人 
^ r 读 取 机 器 人 指定 
on sama, ! ' ! 
KeepAlive( 方 法 ) i 保持 开 
以 列表 的 方式 返回 
ListFiles( 方 法 ) 机 器 人 中 符合 条 件 
wildcard 的 文件 
LsGetStatus( 方 法 ) i " 
从 机 器 人 指定 输 
LsRead( 方 法 ) 入 端 读 取 串 行 通 
信 的 信息 
. 对 机 器 人 指定 输 
LsWrite( 方 法 ) 人 端 读 取 低 速 信息 
MessageRead( 方 法 ) deg * 
MessageWrite( 方 法 ) i = - Ar zi. * 
播放 机 器 人 上 的 


PlaySoundFile( 方 法 ) 


指定 音效 文件 
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续 表 
模块 名 称 模块 及 模块 说 明 
让 机 器 人 发 出 指 
PlayTone( 方 法 ) 定 长 度 和 音频 的 
声音 
ResetInputScaled- po 重 设 指定 输入 端 
VE 
ResetMotorPosition š 
设 定 机 器 人 指定 
输入 端的 状态 ， 
sensorPortLetter 
为 输入 端 编 号 ， 
SetInputMode( 方 法 ) sensorlype 39 JB 
应 器 类 型 ， 
sensorMode 为 感 
应 器 返回 值 的 格式 
设 定 机 器 人 的 指 
SetOutputState( 方 法 ) 定 输出 端的 状态 
StartProgram( 方 法 ) "A 
StopProgram (Jr ik) : E s s fa Be 
StopSoundPlayback zm 
(方法 》 停止 播放 声音 
NxtDirectCommands 通信 规格 的 一 个 
1( 实 例 ) 实例 
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3. NxtDrive(Nxt 电机 ) 
NxtDrive 模块 用 来 控制 NXT 机 器 人 的 马达 ,进而 控制 机 器 人 的 前 进 、 后 退 、 拐 弯 等 
动作 。 
附 表 B.33  NxtDrive 控件 说 明 
模块 名 称 模块 及 模块 说 明 


机 器 人 以 指定 
的 电力 (power) 
后 退 指定 的 距 
离 (distance) 


MoveBackward( 方 法 ) 


让 机 器 人 以 指 
E 的 电力 
(power) 持续 后 
退 , power 范围 
为 一 100 一 100 


MoveBackwardIndefinitely 
(方法 ) 


E 的 电力 
(power) 持续 地 
前 进 , power 范 
Hil y —100— 100 


MoveForwardlIndefinitely 


(方法 ) 


所 有 的 电机 停 


Stop (方法 ) 止 转动 


让 机 器 人 以 指 
定 的 电力 
(power) 持续 地 
顺 时 针 转 动 ， 
power 范围 为 一 
100 一 100 


TurnClockwiselndefinitely 


(方法 ) 


让 机 器 人 以 指 
定 的 电力 
(power) 持续 地 
3 mp sp $e zh. 
power 范围 为 一 
100~100 


TurnCounterClockwise- 


Indefinitely( 方 法 ) 


机 器 人 以 指定 
离 (distance) 
让 机 器 人 以 指 
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续 表 


模块 名 称 模块 及 模块 说 明 


StopBeforeDisconnect ( 属 NxtDrive1.StopBeforeDisconnect 


TE) 


S e 


) ^. NxtDrivet.StopBeforeDisconnect 


设 定 是 否 在 断 开 连接 之 前 将 电机 停止 运转 


NxtDrivel( 实 例 ) 


component 
si NxtDrive1 


控制 电机 的 一 个 实例 


4. NxtLightSensor( Nxt 光 感 应 器 ) 


NxtLightSensor 模块 用 来 控制 乐高 NXT 机 器 人 上 的 光 感 应 器 。 


附 表 B.34 NxtLightSensor 控件 说 明 


模块 名 称 模块 及 模块 说 明 
AboveRange | 当 光 值 高 于 指定 的 范围 时 能 
(事件 ) ; 发 的 事件 

———————————— 
wh 
BelowRange PR. | "(E Ë I° F 38 s ñ) d I p$ ft 
(事件 ) 发 的 事件 
— 5 
WithinRange | 当 光 值 在 指定 的 范围 内 时 触 
(事件 ) Ë 发 的 事件 
Cl 
GetLightLevel call 返回 光 值 强度 ,强度 值 介 于 0 
(方法 ) ^ NxtLightSensor1.GetLightLevel 一 1023 之 间 
AboveRange- 


EventEnabled 
(属性 ) 


set to 
NxtLightSensor1.AboveRangeEventEnabled [^ NxtLightSensor1.AboveRangeEventEnabled 


设置 当 光 值 大 于 TopOfRange 时 ,是 否 触发 AboveRange 事件 


BelowRange- set to y 
NxtLightSensor1.BelowRangeEventEnabled j “_NxtLightSensor1.BelowRangeEventEnabled 
EventEnabled 
(属性 ) 设置 当 光 值 低 于 BottomOfRange 时 ,是否 触发 BelowRange 事件 
set to r 
BottomOf- NxtLightSensor1.BottomOfRange ^ NxtLightSensor1.BottomOfRange 
Range Cj PE) 


dA WihinRange, BelowRange, AboveRange 等 事件 的 最 小 值 
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模块 名 称 


模块 及 模块 说 明 


GenerateLight 
(属性 ) 


set to r 
NxtLightSensor1.GenerateLight J 


光 感 应 器 的 前 端 是 否 会 发 光 


^ NxtLightSensor1.GenerateLight | 


set to E | 
TopOfRange NxtLightSensor1.TopOfRange ) “_NxtLightSensor1.TopOfRange 
(属性 ) 

设置 触发 WithinRange、BelowRange、AboveRange 等 事件 的 最 大 值 
WithinRange- | set y 


EventEnabled 
(属性 ) 


“_NxtLightSensor1.WithinRangeEventEnabled | 


NxtLightSensor1.WithinRangeEventEnabled Š 
设置 当 光 值 介 于 BottomOfRange 与 TopOfRange 之 间 时 ,是 否 触发 WithinRange 事件 


NxtLight- 
Sensorl (实例 ) 


component 
n NxtLightSensor1 


光 感 应 器 的 一 个 实例 


5. NxtSoundSensor( Nxt 声音 感应 器 ) 


NxtSound 


Sensor 模块 用 来 控制 乐高 NXT 机 器 人 上 的 声音 感应 器 。 


附 表 B.35  NxtSoundSensor 控件 说 明 


模块 名 称 模块 及 模块 说 明 
when NxtSoundSensor1.AboveRange : 2 
AboveRange CHE do ~ 当 音量 高 于 指定 的 范围 时 
"n 触发 的 事件 
sl 
wh 
BelowRange ( 事 人 当 音 量 低 于 指定 的 范围 时 
件 ) 触发 的 事件 
— ,....A......................... 
whel 
WithinRange( 事 n Soera nos 当 音量 介 于 指定 的 范围 内 
件 ) 时 触发 的 事件 
ES 
GetSoundLevel call 返回 音量 强度 ,强度 值 介 于 
(方法 ) ^. NxtSoundSensor1.GetSoundLevel 0—1023 之 间 
AboveRange- set to P 
NxtSoundSensor1.AboveRangeEventEnabled ^_NxtSoundSensor1.AboveRangeEventEnabled 
EventEnabled 一 一 
(属性 ) 设置 当 音 量 超 过 TopOfRange 时 ,是 否 触发 AboveRange 事件 


模块 名 称 
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续 表 
模块 及 模块 说 明 


BelowRange- 
EventEnabled 
(属性 ) 


set to 
NxtSoundSensor1.BelowRangeEventEnabled [4 NxtSoundSensor1.BelowRangeEventEnabled | 


设置 当 音 量 低 于 BottomOfRange 时 ,是 否 触 发 BelowRange 事件 


set to | 
NxtSoundSensor1.BottomOfRange [ ^ NxtSoundSensor1.BottomOfRange 


BottomOfRange 
(属性 ) 

设置 触发 WithinRange、BelowRange、AboveRange 等 事件 的 最 小 值 

set to [ 

TopOfRange NxtSoundSensor1.TopOfRange ^ NxtSoundSensor1.TopOfRange 
(属性 ) 

设置 触发 WithinRange、BelowRange、AboveRange 等 事件 的 最 大 值 
WithinRange- 


EventEnabled 
(属性 ) 


š NxtSoundSensor1.WithinRangeEventEnabled 2 " ^ NxtSoundSensor1.WithinRangeEventEnabled | 
设置 当 音 量 介 于 BottomOfRange 与 TopOfRange 之 间 时 ,是 否 触 发 WithinRange 事件 


NxtSoundSensor 
1( 实 例 ) 


component 
a NxtSoundSensor1 


声音 感应 器 的 一 个 实例 


6. NxtTouchSensor( Nxt 触摸 感应 器 ) 


NxtTouchSensor 模块 用 来 控制 乐高 NXT 机 器 人 上 的 触摸 感应 器 。 


Wiz B.36  NxtTouchSensor 控件 说 明 


模块 名 称 模块 及 模块 说 明 
when  NxtTouchSensor1.Pressed | 
A s ERR F 
Pressed( 事 件 ) do 当 触摸 应 器 被 按 下 时 
触发 的 事件 
when NxtTouchSensori.Released 
A se [35 : 
Released GE fF» do uus ene 
m 返回 触摸 感应 器 是 否 被 
IsPressed( 方 法 ) RP qxtrouchsensort:IsPressed 按 下 


Set to 
PressedEventEnabled NxtTouchSensor1.PressedEventEnabled 1 NxtTouchSensor1.PressedEventEnabled | 


(属性 ) 


设置 当 触摸 感应 器 被 按 下 时 是 否 能 够 触发 Pressed 事件 
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续 表 
模块 名 称 模块 及 模块 说 明 
ReleasedEvent- E NxtTouchSensor1.ReleasedEventEnabled zw * NxtTouchSensor!.ReleasedEventEnabled | 
Enabled( 属 性 ) 
设置 放 开 和 触摸 感应 器 时 是 否 能 够 触发 Released 事件 
NxtTouchSensor1 dicia NxtTouchSensor1 | 
(实例 ) 


触摸 感应 器 的 一 个 实例 


7. NxtUltrasonicSensor( Nxt 超 音 波 感应 器 ) 


NxtUltrasonicSensor 模块 的 主要 功能 是 用 来 控制 乐高 NXT 机 器 人 上 的 超 音波 感 
应 器 ,如 附 表 B. 37 所 示 。 


附 表 B.37  NxtUltrasonicSensor 控件 说 明 


模块 名 称 模块 及 模块 说 明 

AboveRange cair | NEG | REPA F AE SE tO A I D A 
件 ) E 发 的 事件 

BalowRange car | 六 
件 ) FE 发 的 事件 

when 

WithinRange( 事 : NxtUltrasonicSensor1.WithinRange | 当 距 离 介 于 指定 的 范围 之 间 
件 ) E 时 触发 的 事件 


GetDistance ( Jy cem 返回 距离 的 大 小 ,单位 为 厘 
法 ) ^ ^ NxtüitrasonicSensori.GetDistance 米 , 距 离 值 介 于 0 一 254 


AboveRange- set tof 

NxtUltrasonicSensorí.AboveRangeEventEnabled ^ NxtültrasonicSensor1.AboveRangeEventEnabled 
EventEnabled 
(属性 ) 设置 当 距 离 超 过 TopOfRange 时 ,是否 触发 AboveRange 事件 
BelowRange- set Er 

NxtUItrasonicSensor1.BelowRangeEventEnabled ^ NxtUltrasonicSensor1.BelowRangeEventEnabled 
EventEnabled E DE 


(属性 ) 设置 当 距 离 小 于 BottomOfRange 时 ,是 否 触 发 BelowRange 事件 
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续 表 
模块 名 称 模块 及 模块 说 明 
set to r 

BottomOfRange NxtUltrasonicSensor1.BottomOfRange ^ NxtUltrasonicSensor1.BottomOfRange 
(属性 ) 

设置 触发 WithinRange、BelowRange、AboveRange 等 事件 的 最 小 值 

- set to r z 

TopOfRange( 属 NxtUltrasonicSensor1.TopOfRange j “_NxtUltrasonicSensor1.TopOfRange 
性 ) 

设置 触发 WithinRange、BelowRange、AboveRange 等 事件 的 最 大 值 
WithinRange- set Pp | 

NxtUltrasonicSensor1.WithinRangeEventEnabled j ^. NxtUltrasonicSensor1.WithinRangeEventEnabled 


EventEnabled 
(属性 ) 


设置 当 距 离 介 于 BottomOfRange 与 TopOfRange 之 间 时 ,是 否 触发 WithinRange 事件 


NxtUltrasonic- 
Sensorl( 实 例 ) 


component 
H NxtUltrasonicSensor1 


超 音波 感应 器 的 一 个 实例 


B8 Oher stuff 3 ftt, Z t 


其 他 控件 共 9 个 ,包括 ActivityStarter, BarcodeScanner, BluetoothClient, BluetoothServer, 
Notifice, SpeechRecognizer, Text ToSpeech, TinyWebDB 和 Web, 各 个 控件 的 事件 、 属 性 
和 方法 如 附 表 B. 38 一 附 表 B. 46 所 示 。 


1.ActivityStarter( 程 序 启动 器 ) 


ActivityStarter 组 件 是 一 个 不 可 见 控件 ,通过 该 控件 可 以 调用 第 三 方 应 用 程序 。 


模块 名 称 


附 表 B.38  ActivityStarter 控件 说 明 
模块 及 模块 说 明 


AfterActivity 
(事件 ) 


when ActivityStarter1.AfterActivity resutt (" 
do 


调用 第 三 方 应 用 程序 完成 后 触发 
本 事件 


—————— 


ResolveActivity 


(方法 ) 


返回 被 调用 的 第 三 方 应 用 程序 的 
名 称 , 若 未 找到 则 返回 空 字 符 串 。 
通过 本 方法 可 以 确认 第 三 方 应 用 
程序 是 否 已 安装 在 手机 中 


call 
"l ActivityStarter1.ResolveActivity 


StartActivity (Jj 
法 ) 


启动 第 三 方 应 用 程序 


' 
Š” ActivityStarter1.StartActivity 
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续 表 
模块 名 称 模块 及 模块 说 明 
= I e : 
Action JR AE) ActivityStarter1. Action j ^. ActivityStarter.Action 
调用 第 三 方 应 用 程序 的 执行 动作 
iil r1 Kx 1.ActivityCl | 
ActivityClass( 属 性 ) ActivityStarter1.ActivityClass ) vityStarter1.ActivityClass 


调用 第 三 方 应 用 程序 的 类 名 称 


ActivityPackage 
(属性 ) 


set to 
ActivityStarter1.ActivityPackage ”ActivityStarter1.ActivityPackage 


调用 第 三 方 应 用 程序 的 包 名 称 


DataType( 属 性 ) 


set 


ActivityStarter1. DataType s D ^ ActivityStarter1.DataType 
调用 第 三 方 应 用 程序 的 数据 类 型 


DataUri( 属 性 ) 


set 


ActivityStarter1.DataUri 5 D ^ ActivityStarter1.DataUri 
调用 第 三 方 应 用 程序 的 数据 统一 资源 定位 符 


set to y 
ActivityStarter1.ExtraKey j ”ActivityStarter1.ExtraKe' 


ExtraKey( 属 性 ) 
传递 给 第 三 方 应 用 程序 的 键 名 称 
ee to [ 
ExtraValue( 属 性 ) ac] ”ActivityStarter1.ExtraValue 
传递 给 第 三 方 应 用 程序 的 键 值 
e to Ü” 
ResultName( Jš FE) Te ^_ActivityStarter1.ResultName 
结果 的 名 称 
Result( 属 性 ) AS 
结果 的 内 容 
ResultType (属性 ) ^_ActivityStarter1.ResultType | 


数据 类 型 
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续 表 
模块 名 称 模块 及 模块 说 明 


^ ActivityStarter1.ResultUri | 


统一 资源 定位 符 


nt 
ActivityStarter1 ded ActivityStarter1 


(实例 ) 
"t 程序 启动 器 的 一 个 实例 


ResultUri( 属 性 ) 


2. BarcodeScanner( 条 码 扫 描 器 ) 


BarcodeScanner 通过 启动 手机 的 摄像 头 来 读 取 条 形 码 或 二 维 码 CQR 码 ) 。 
附 表 B.39  BarcodeScanner 控件 说 明 
模块 名 称 模块 及 模块 说 明 


when BarcodeScanner1.AfterScan result (^ 


AfterScan( 事 件 ) do 扫描 结束 事件 


对 条 形 码 或 二 维 码 进行 
DoScan( Jr ik) eal barcodeScannerí.DoScan | : : 形 码 或 一 维 码 进行 


Result( 属 性 ) BarcodeScanner1.Result 


扫描 成 功 后 返回 的 字符 串 结果 


医 component 
BarcodeScannerl (实例 ) Barcodescanner1 


条 码 扫 描 器 的 一 个 实例 


3. BluetoothClient( 蓝 牙 客 户 端 ) 


BluetoothClient 是 蓝牙 通信 的 客户 端 ,可 以 调用 手机 上 的 蓝牙 设备 ,实现 手机 与 其 
他 蓝牙 设备 之 间 的 连接 。 


附 表 B.40  BluetoothClient 控件 说 明 


模块 名 称 模块 及 模块 说 明 


在 不 阻塞 的 情况 


BytesAvailableTo- Š 
Receive( 方 法 ) ^" BluetoothCllent1. BytesAvallableToRecelve 下 ,预计 可 接收 的 


字 节 数 
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续 表 
模块 名 称 模块 及 模块 说 明 
通过 address 与 另 
一 个 蓝牙 设备 建 
回 true 
E E E E - m 通 过 address 和 
ConnectWithUUID UUD 与 另 一 个 蓝 
(方法 ) 牙 设备 建立 连接 ， 
成 功 则 返回 true 
Disconnect( 方 法 ) | 中 断 蓝 牙 连接 
-— 检测 是 否 与 指定 
ororo | ”IE — inns 
1ByteNumber( 方 法 ) 长 度 的 有 符号 数 
2ByteNumber( 方 法 ) 长 度 的 有 符号 数 
4ByteNumber( 方 法 ) 度 的 有 符号 数 
从 连接 的 蓝牙 设 
(方法 ) 的 有 符号 数 的 值 ， 
直到 遇 到 结束 符 
从 连接 的 蓝牙 设备 
ReceiveText( 方 法 ) 接收 一 个 字符 串 ， 
直到 遇 到 结束 符 
_ | 从 连接 的 蓝牙 设 
mee, | “Ó 
ü 长 度 的 无 符号 数 
ReceiveUnsigned 从 连接 的 蓝牙 设 
长 度 的 无 符号 数 
4ByteNumber( 方 法 ) 度 的 无 符号 数 
从 连接 的 蓝牙 设 
(方法 ) 的 无 符号 数 的 值 ， 
直到 遇 到 结束 符 
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续 表 
模块 名 称 模块 及 模块 说 明 
> 向 连接 的 蓝牙 设 
长 度 的 数 
— 向 连接 的 蓝牙 设 
长 度 的 数 
向 连接 的 蓝牙 设 
度 的 数 
向 连接 的 蓝牙 设 
AddressesAndNames | 
(属性 ) 
已 配对 蓝牙 设备 的 地 址 和 名 称 
Available( 属 性 ) ^ BluetoothClient1.Avallable 
Android 设备 上 的 蓝牙 可 用 性 
(属性 ) 
接收 信息 的 字符 编码 方式 


DelimiterByte( 属 性 ) 


使 用 ReceiveText 、ReceiveSignedBytes、ReceiveUnsignedBytes 等 方法 时 的 结束 符 


^ BluetoothClient1.Enabled 


Enabled fi PE) 
蓝牙 客户 端 是 否 可 用 
是 否 采用 高 位 优先 传递 的 传输 方式 
Secure URHE) E ^ BluetoothClient1.Secure 


是 否 采用 简易 安全 配对 机 制 
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续 表 
模块 名 称 模块 及 模块 说 明 
IsConnected( 属 性 ) —_BluetoothClient1.ISConnected | 
是 否 已 建立 连接 
BluetoothClient1 ( Sc ATE BluetoothClient1 | 


例 ) 


蓝牙 客户 端的 一 个 实例 


4. BluetoothServer( 蓝 牙 服 务 端 ) 


BluetoothServer 是 蓝牙 通信 的 服务 端 ,可 以 调用 Android 手机 上 的 蓝牙 设备 ,实现 
手机 与 其 他 蓝牙 设备 之 间 的 连接 。 


模块 名 称 


附 表 B.41  BluetoothServer 控件 说 明 
模块 及 模块 说 明 


ConnectionAccepted 


(事件 ) 


T BluetoothServer1.ConnectionAccepted 蓝牙 连接 被 接受 
事件 


———————M———————À 


AcceptConnection( Jf 


法 ) 


5 BluetoothServer1.AcceptConnection peii 0 接受 外 部 蓝牙 连接 


AcceptConnection- e servieeName (^ 接受 指定 设备 的 
WithUUID( 方 法 ) BluetoothServer1.AcceptConnectionWithUUID uuid 蓝牙 连接 请 求 
EEO 
在 不 阻塞 的 情况 
BytesAvailableTo- 
Receive( 方 法 ) weal BluetoothServer1.BytesAvailableToReceive 下 可 接收 的 字 节 
数 (估计 值 ) 
Disconnect( 方 法 ) ll | 中 断 蓝牙 连接 
ReceiveSi 从 连接 的 蓝牙 设 
eceiveSigned 备 接收 一 个 字 节 
hi BluetoothServer1.ReceiveSigned1ByteNumber 
1ByteNumber( 方 法 ) 长 度 的 有 符号 数 
从 连接 的 蓝牙 设 


ReceiveSigned 
2ByteNumber( 方 法 ) 


call A 
FE 个 


长 度 的 有 符号 数 
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续 表 
模块 名 称 模块 及 模块 说 明 
ReceiveSigned pueda cie 
FE 
4ByteNumber( 方 法 ) 度 的 有 符号 数 
从 连接 的 蓝牙 设 
ReceiveSignedBytes 备 接 收 多 个 字 节 
(方法 ) 的 有 符号 数 的 值 ， 
直到 遇 到 结束 符 
从 连接 的 蓝牙 设备 
直到 遇 到 结束 符 
" š 从 连接 的 蓝牙 设 
wwe 600 
É. 长 度 的 无 符号 数 
ReceiveUnsigned 从 连接 的 蓝牙 设 
sheNumber | PE 个 学 
长 度 的 无 符号 数 
4ByteNumber( 方 法 ) ENEAS 
从 连接 的 蓝牙 设 
ReceiveUnsigned- 备 接收 多 个 字 节 
Bytes( 方 法 ) 的 无 符号 数 的 值 ， 
直到 遇 到 结束 符 
_ m c 向 连接 的 蓝牙 设 
长 度 的 数 
- Ñ 向 连接 的 蓝牙 设 
长 度 的 数 
向 连接 的 蓝牙 设 
oO 
度 的 数 
向 连接 的 蓝牙 设 
Sende Cri) peeonseven senaeyes "f Prin 
向 连接 的 蓝牙 设 
dre) puetoomserer senaren "G karran 
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续 表 
模块 名 称 模块 及 模块 说 明 
不 再 接受 外 部 连 
StopAccepting( 方 法 ) °°! BluetoothServer1.StopAccepting 接 请 求 T 
IsAccepting JB PE) ^ BluetoothServerl.IsAccepting | 


是 否 允 许 蓝牙 客户 端的 连接 请 求 


Available( 属 性 ) 


^_BluetoothServer1.Available | 


手机 上 的 蓝牙 可 用 性 


CharacterEncoding 


(属性 ) 


BluetoothServer1.CharacterEncoding i r ”BluetoothServer1.CharacterEncoding 
接收 信息 的 字符 编码 方式 


DelimiterByte( 属 性 ) 


set 


to 
BluetoothServer1.DelimiterByte [ ^ BluetoothServer1.DelimiterByte 


使 用 ReceiveText , ReceiveSignedBytes , ReceiveUnsignedBytes 等 方法 时 的 结束 符 


Enabled( 属 性 ) 


”BluetoothServer1.Enabled 


蓝牙 服务 端 是 否 可 用 


HighByteFirst( 属 性 ) 


set 


BluetoothServer1-HighByteFirst "^ [ ^. BluetoothServer1.HighByteFirst 
是 否 采用 高 位 优先 传递 的 传输 方式 


ne 1.Si CIN z 
Secure( 属 性 ) Uetoo rver1.Secure BluetoothServer1.Secure 
是 否 采用 简易 安全 配对 机 制 
IsConnected JB tE) ^ BluetoothServer1.IsConnected | 


是 否 已 建立 连接 


BluetoothServerl ( 实 
例 ) 


component 
M BluetoothServer1 


蓝牙 服务 端的 一 个 实例 


5. Notifier( 通 知 ) 


Notifier 用 来 显示 浮动 信息 .选择 对 话 框 、 消 息 对 话 框 和 文本 输入 对 话 框 。 
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附 表 B.42  Notifier 控件 说 明 


模块 名 称 模块 及 模块 说 明 
š 在 选择 对 话 框 中 做 出 选 
AfterChoosing( 事 件 ) 择 后 触发 本 事件 
在 文本 输入 对 话 框 输入 
AfterTextInput (事件 ) 文本 ,并 选择 确定 后 触发 
本 事件 
LogError( 方 法 ) 显示 错误 信息 
LogInfo( 方 法 ) 显示 日 志 信息 
LogWarning( 方 法 ) 显示 警告 信息 


ShowAlert( 方 法 ) 


显示 临时 通知 ,数秒 钟 后 


自动 消失 
ShowChooseDialog n x 
(方法 ) 显示 选择 对 话 框 
ShowMessageDialog =s " 
(方法 ) 显示 消息 对 话 框 
ShowTextDialog ( 方 显示 文本 输入 对 话 框 


法 ) 


A 


Notifierl (实例 ) 


5 component Nat 


通知 的 一 个 实例 
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6. SpeechRecognizer( 语 音 识别 器 ) 


SpeechRecognizer 是 一 个 非 可 视 化 控件 ,可 以 将 语音 输出 转化 为 文本 输出 。 


模块 名 称 


附 表 B. 43  SpeechRecognizer 控件 说 明 
模块 及 模块 说 明 


AfterGettingText 


when SpeechRecognizer1.AfterGettingText resuit (^ 
i 


语音 识别 后 事件 
(事件 ) do 语音 识别 后 事件 
n 
BeforeGettingT: when SpeechRecognizer1.BeforeGettingText 
etoreGetting 1 ext Y ; ET j- 
(事件 ) do 语音 识别 前 事件 
; 将 用 户 的 语音 数据 
GetText( 方 法 ) cal SpeechRecognizerlGetText 转化 为 文字 
Result( 属 性 ) ”SpeechRecognizer1.Result 


语音 识别 后 的 文字 信息 


SpeechRecognizerl 
(实例 ) 


component 
"1 SpeechRecognizer1 


语音 识别 器 的 一 个 实例 


7. TextToSpeech( 语 音 转 换 器 ) 


TextToSpeech 是 一 个 非 可 视 化 控件 ,可 以 将 输入 的 文字 转化 为 语音 输出 ,可 以 通过 
设置 语言 种 类 及 地 区 来 设置 输出 语音 。 


附 表 B. 44 TextToSpeech 控件 说 明 


模块 名 称 模块 及 模块 说 明 
when TextToSpeechi.AfterSpeaking result P 
AfterSpeaking( 事 件 ) do 语音 转换 后 事件 
一 
when TextToSpeechi.BeforeSpeaking 
BeforeSpeaking( 事 件 ) do 语音 转换 前 事件 
a 
Speak( 方 法 ) pal TextToSpeech1.Speak Lud D 将 文字 转化 为 语音 输出 
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续 表 
模块 名 称 模块 及 模块 说 明 


set to P 


TextToSpeech1.Country ) “_TextToSpeech1.Country | 


Country( 属 性 ) 
国家 (地 区 ) 代 码 


«X 


set 
TextToSpeech1.Language Jj TextToSpeech1.Language | 


Language( 属 性 ) 
语言 代码 


Result( 属性 ) | TextToSpeech1.Result 


输出 的 语音 


性 component 
TextToSpeechl( 实 例 ) TextToSpeech1 


语音 转换 器 的 一 个 实例 


8. TinyWebDB( 微 型 网 络 数据 库 ) 
TinyWebDB 是 一 个 非 可 视 化 控件 ,可 以 通过 网 络 完成 对 网 络 端 数据 库 的 存储 和 读 
取 操 作 。 
附 表 B.45 TinyWebDB 控件 说 明 
模块 名 称 模块 及 模块 说 明 


when TinyWebDB1.GotValue ^ tagFromWebDB (" 


ie valueFromWebDB 当 完 成 GetValue 时 


GotValue( 事 件 ) m 触发 本 事件 


一 


when TinyWebDB1.ValueStored 
ValueStored( 事 件 ) do 数据 存储 完成 事件 


— r U 


when TinyWebDB1.WebServiceError message (^ 


WebServiceError 网 络 数 据 库 服务 出 
(事件 ) S 错 事件 
Sm U lU U l U U 
从 网 络 数据 库 服务 


GetValue( 方 法 ) 


i TinyWebDBi.GetValue “9 D 器 中 获取 给 定 标签 
为 tag 的 数据 
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模块 名 称 


续 表 
模块 及 模块 说 明 


StoreValue( 方 法 ) 


向 网 络 数 据 库 服务 
器 中 存储 标签 为 tag 
的 数据 


ServiceURL( 属 性 ) 


微型 网 络 数 据 库 的 URL 值 


TinyWebDB1( 实 例 ) 


9. Web( 浏 览 器 ) 


à lent 
PO TInyWebDB1 


微型 网 络 数据 库 模 块 的 一 个 实例 


Web 控件 是 一 个 非 可 视 化 控件 ,可 以 完成 对 网 页 的 访问 及 相关 操作 。 


附 表 B.46 Web 控件 说 明 


模块 名 称 模块 及 模块 说 明 
SaveResponse 属性 为 true 时 ,Get 
GotFile( 事 件 ) 方法 的 响应 将 产生 文件 ,并 引发 
此 事件 
GotText( 事 件 ) SaveResponse 属性 为 false 时 ,Get 


方法 的 响应 将 引发 此 事件 


BuildPostDate( 方 法 ) 


将 有 两 个 子 列 的 列表 转换 为 关键 
字 和 值 的 数据 


ClearCookies( 方 法 ) 


清空 Cookies 
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续 表 
模块 名 称 模块 及 模块 说 明 
执行 一 个 HTTP GET 请 求 ,并 根 
据 属 性 SaveResponse 获取 响应 。 
" "IT 如 果 SaveResponse 为 true. Tf Wi JW 
icd 保存 成 文件 ,并 引发 GetFile 事件 
如 果 SaveResponse 为 false, 将 引发 
Text 事件 
HtmlTextDecode — 
(方法 ) 对 HTML 文本 值 进行 解码 
m m 对 Json 文本 值 进行 解码 


PostFile( 方 法 ) 


执行 一 个 HTTP POST 请 求 , 如 果 
SaveRespose 属性 值 true, 响 应 将 被 
保存 在 一 个 文件 中 并 触发 GotFile 
事件 ;如 果 SaveResponse 属性 值 为 
false 将 触发 GotText 的 事件 


PostText( 方 法 ) 


执行 一 个 HTTP POST 请 求 , 使 用 
UFT-8 对 字符 进行 编码 。 如 果 
SaveResponse 属性 值 为 true, 将 响 
应 值 保 存在 一 个 文件 中 并 触发 
GotFile 事件 。 如 果 SaveResponse 
属性 值 为 false, 则 触发 GotText 
事件 


PostTextWith 
Encoding( 方 法) 


执行 一 个 HTTP POST 请 求 , 用 指 
定 的 方式 对 字符 进行 编码 ,如 果 
SaveResponse 属性 值 为 true, 将 响 
应 值 保 存在 一 个 文件 中 并 触发 
GotFile 事件 。 如 果 SaveResponse 
属性 值 为 false, 则 触发 GotText 
事件 


UriEncode( 方 法 ) 


将 字符 转化 为 Uri 编码 方式 


AllowCookies( 属 性 ) 


^ Web1.AllowCookies 


是 否 将 当前 网 页 的 相关 信息 存储 到 Cookies 文件 夹 中 


RequestHeaders 
(属性 ) 


返回 的 头 信 息 
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续 表 
模块 名 称 模块 及 模块 说 明 
Set to r | 
ResponseFileName Web1.ResponseFileName | _Web1.ResponseFileName 
(属性 ) 


返回 信息 的 存储 文件 的 位 置信 息 


set ti 
SaveResponse ( 属 Web1.SaveResponse L ^ Web1.SaveResponse 


性 ) 
是 否 将 返回 的 信息 存储 在 一 个 文件 中 
ee “rn "WO 


访问 网 页 的 Url 值 


& component 
Webl( 实 例 ) DU wen | 


浏览 器 的 一 个 实例 


B9 Nd ready for prime time(7s "X £k E v 
不 成 熟 控 件 共 5 个 ,包括 FusiontablesContral, GameClient , SoundRecord, Voting 和 
WebViewer, 各 个 控件 的 事件 .属性 和 方法 如 附 表 B. 47 一 附 表 B. 51 所 示 。 
1. FusiontablesContral( 融 合 表 控制 器 ) 


融合 表 是 谷歌 文档 的 一 部 分 ,融合 表 控 制 器 (FusiontablesContral) 的 主要 功能 是 利 
用 谷歌 的 API 查询 .创建 和 修改 融合 表 。 


附 表 B. 47 FusiontablesContral 控件 说 明 


模块 名 称 模块 及 模块 说 明 
when FusiontablesControll.GotResult result F 当 返 回 查 询 结 
GotResult( 事 件 ) do Ride 查询 结果 时 触发 


et 


这 个 方法 已 经 被 弃 用 ,被 
DoQuery( 方 法 ) | SentQuery 取代 
当 使 用 已 经 丢弃 的 用 户 


ForgetLogin( 方 法 ) °° FusiontablesControH.ForgetLogin 名 登录 融合 表 时 ,强制 进 


行 重新 认证 
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续 表 
模块 名 称 模块 及 模块 说 明 
SendQuery( 方 法 ) 区 执行 查询 融合 表 的 操作 
set to y B y. | 
ApiKey( 属 性 ) FusiontablesControl1.ApiKey j _FusiontablesControl1.ApiKey 
谷歌 API 的 KEY 
set to K | 
Query( 属 性 ) FusiontablesControl1.Query J ”FusiontablesControll.Query 
发 送 给 谷歌 融合 表 API 的 请 求 
FusiontablesControll SR FusiontablesControl1 
(实例 ) 
融合 表 控 制 器 的 一 个 实例 


2. GameClient( 游 戏 客户 端 ) 


GameClient 的 主要 功能 


是 游戏 服务 器 端的 通信 实现 多 人 游戏 。 
附 表 B. 48  GameClient 控件 说 明 


模块 名 FR 模块 及 模块 说 明 
FunctonCompleei| ee ameclienti.Functioncompleted funeioname Ñ i 
(事件 ) 所 触发 的 事件 
when GameClient1.GotMessage type P 
N T LE m 
GotMessage E fF) contents y " >: Hm "ade i 
do Bu 
when GameClienti.Info message & 
- = 的 消息 
Doi) š MNMEBEA 
——— 7 
i ja d when GamecClienti.InstanceldChanged — instanceld K 当 一 个 实例 的 Id 属 
nstance ange io s. a 化 iis s 
(事件 ) d 5 化 时 触发 
—M M3 
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续 表 
模块 名 称 模块 及 模块 说 明 
用 户 被 邀请 参加 某 
Invited( 事 件 ) 一 个 游戏 时 触发 的 
事件 
NewInstanceMade 创建 一 个 新 的 实例 
(事件 ) 时 触发 的 事件 
游戏 中 被 指定 一 个 
NewLeader( 事 件 ) 新 的 领导 者 时 触发 
的 事件 
s 有 一 个 新 的 玩家 加 
PlayerJoined( 事 件 ) 入 游戏 时 触发 的 事件 


有 一 个 玩家 退出 游 


PlayerLeft( 事 件 ) 戏 时 触发 的 事件 
ServerCommand- 当 一 个 服务 器 命令 
Failure( 事 件 ) 失败 时 触发 的 事件 
ServerCommand- 当 一 个 s 
Success( 事 件 ) RE 
的 事件 
当 用 户 的 电子 邮件 
imi 地 址 已 经 被 设置 时 
触发 的 事件 
WebServiceError 与 网 络 服务 通信 发 
(事件 ) 生 错 误 时 触发 的 事件 
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续 表 
模块 名 称 模块 及 模块 说 明 
GetMessages( 方 法 ) 获取 指定 的 类 型 的 
消息 
: 邀请 指定 的 玩家 到 
Invite( 方 法 ) 当前 游戏 
LeaveInstance( 方 法 ) [E uc 玩家 离开 当前 的 游戏 
MakeNewJnstance 向 服务 器 申请 新 建 
(方法 ) 一 个 游戏 的 实例 
向 收 件 人 列表 中 的 
SendMessage( 方 法 ) 所 有 人 发 送 消息 
ServerCommand 向 游戏 服务 器 发 送 
(方法 ) 指定 的 命令 
SetInstance( 方 法 ) i ia 
设置 指定 的 玩家 为 
SetLeader( 方 法 ) 新 的 领导 者 


Gameld( 属 性 ) 


^ GameClienti.Gameld | 


游戏 的 ID 


Instanceld( 属 性 ) 


^ GamecClient1.Instanceld | 


游戏 的 实例 ID. i Gameld 和 Instanceld 可 以 唯一 确定 一 个 游戏 
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模块 名 称 


模块 及 模块 说 明 


InvitedInstances 


(属性 ) 


”Gameclient1.Invitedlnstances | 


已 经 向 当前 的 游戏 玩家 发 送 邀 请 的 游戏 实例 的 集合 


JoinedInstances( 属 ”Gameclient1.Joinedlnstances | 


性 ) 
当前 的 玩家 已 经 加 入 的 游戏 实例 的 集合 
Leader( 属 性 ) ^ GamecClient1.Leader 
游戏 的 领导 者 
Players( 属 性 ) ”Gameclient1.Players 


当前 游戏 实例 的 在 线 玩 家 的 集合 


^ GamecClient1.Publicinstances 


PublicInstances C/fj 


性 ) 
具有 公开 属性 的 游戏 实例 的 集合 
ServiceUrl( 属性 ) ^ GamecClient1.ServiceUrl 


游戏 服务 的 URL 


UserEmailAddress 


set to 
GamecClient1.UserEmailAddress , ^ GameClient1.UserEmailAddress 
(属性 ) 


游戏 玩家 的 电子 邮件 地 址 


component 
É GamecClient1 


游戏 客户 端的 一 个 实例 


GameClientl (实例 ) 


3. SoundRecorder( 录 音 器 ) 


SoundRecorder 的 主要 功能 是 音频 录制 。 
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附 表 B.49 SoundRecorder 控件 说 明 


模块 名 称 模块 及 模块 说 明 

when SoundRecorderi.AfterSoundRecorded sound r 
AfterSoundRecorded p 当 音 频 文件 录制 完 
(事件 ) 成 后 触发 的 事件 

s 
wh 

StartedRecording » SoundRecorder1.StartedRecording | 开始 录音 时 触发 的 
(事件 ) i 事件 
E, MER TA a SoundRecorder1.StoppedRecording 停止 录音 时 触发 的 
(事件 ) 事件 
Start( 方 法 ) eal soundRecorderi.Start 开始 录制 
Stop( 方 法 ) Em SoundRecorder1.Stop 停止 录制 
SoundRecorderl a, Sua SoundRecorder1 
(实例 ) 


4. Voting( 投 票 ) 


录音 器 的 一 个 实例 


Voting 的 主要 功能 是 进行 网 络 投票 ,通过 网 络 服务 检索 投票 返回 用 户 的 选择 。 


模块 名 称 


附 表 B.50 Voting 控件 说 明 
模块 及 模块 说 明 


GotBallot( 事 件 ) 


when Voting1.GotBallot 
do 


检索 到 一 项 投票 时 


触发 的 事件 
TM when Voting1.GotBallotConfirmation | 
GotBallotConfirmation( 事 网 收 到 服务 器 对 投票 
件 ) Bs 的 确认 时 触发 的 事件 
when  Voting1.NoOpenPoll . 
NoOpenPoll GE £F) do iie pala s: 


oe 
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续 表 
模块 名称 模块 及 模块 说 明 
when Voting1.WebServiceError message C 与 网 络 服务 通信 时 
WebServiceError( 事 件 ) do S 遇 到 错误 时 触发 的 
事件 
3 
g Ë # 
RequestBallot( 方 法 ) i | be n EN T 
向 网 络 服务 器 发 送 
SendBallot( 方 法 ) °°! Voting1.SendBallot 一 次 完整 的 投票 


BallotOptions( 属 性 ) 


—_voting1.BallotOptions 


投票 组 件 的 选项 列表 


BallotQuestion( 属 性 ) 


”Voting1.BallotQuestion 


投票 组 件 的 投票 主题 


UserEmailAddress( 属 性 ) 


^ Moting1.UserEmallAddress 


设备 绑 定 的 电子 邮件 地 址 (该 属性 已 经 被 丢弃 ) 


ServiceURL( 属 性 ) 


set 


ur 
Voting1.ServiceURL J ^. Voting1.ServiceURL 
投票 服务 的 URL 


UserChoice( 属 性 ) 


set to P 
Voting1.UserChoice J ”Voting1.UserChoice 
用 户 的 投票 选择 


UserId( 属 性 ) 


Set 


EP mm 
Voting1.Userld P Voting1.Userld 
用 于 识别 选民 的 ID 


Votingl( 实 例 ) 


component 
"| Voting1 


投票 的 一 个 实例 


5. WebViewer( 网 页 浏览 器 ) 


WebViewer 的 主要 功能 是 浏览 网 页 ,实现 上 网 的 功能 。 
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附 表 B.51 WebViewer 控件 说 明 


模块 名 称 模块 及 模块 说 明 

E-m 

下 一 页 
GoBack( 方 法 ) Bass) RM QUEE 
GoForward Jr 1& ) 79 wen viewertGororvara 和 
Golian Rr 
P O roren ve 
CurrentPageTitle( 属 性 ) -waavewertcumentpaaerme | 


正在 浏览 的 网 页 的 标题 


CurrentUrl( 属 性 ) 


”WebViewer1.Currenturl 


正在 浏览 的 网 页 的 URL 


FollowLinks( 属 性 ) 


“ aavieseruotowtine C- wonvever tenti 


是 否 跟 踪 链 接 , 如 果 跟 踪 则 可 以 使 用 GoForward 和 GoBack 功能 


Height( 属 性 ) 
组 件 高 度 
HomeUrl( 属 性 ) BW ”WebViewer1.HomeuUrl 
组 件 的 默认 主页 
Visible( 属 性 ) wavewonveae on ^ WebViewert.Visible 
设 组 件 是 否 可 见 
wait epverer wan "° + wesveneri wn 
组 件 的 宽度 
, component 
WebViewerl Cz f) WebViewer1 


网 页 浏览 器 的 一 个 实例 


